Bootstrap 媒体查询在 576px 下不工作

Question

我的底部 Navbar 样式没有准确地应用在 576 像素处。

CSS 我用于造型：

@media (max-width: 576px) {
  .bootomTab {
    display: flex !important;
    position: absolute;
    bottom: 0;
    height: 30px;
    background-color: white;
    border-top: 1px solid #e6ecf0;
    flex-direction: row !important;
  }

  .bootomTab a {
    flex-grow: 1;
    padding: 0;
    height: 0;
  }
}

在我的 HTML 中，我正在使用 bootstrap 断点 sm，根据 bootstrap official doc:[=19=，其尺寸≥576px ]

<nav className="bootomTab d-none d-sm-flex col-sm-2 col-lg-3">
            <div className="logo">
              <a href="/home">
                <img src="/twitter.png" alt="logo" />
              </a>
            </div>
            <a href="/home">
              <i className="fas fa-home"></i>
            </a>
            <a href="/search">
              <i className="fas fa-search"></i>
            </a>
            <a href="/notifications">
              <i className="fas fa-bell"></i>
            </a>
            <a href="/messages">
              <i className="fas fa-envelope"></i>
            </a>
            <a href="/profile">
              <i className="fas fa-user"></i>
            </a>
            <div className="mobileHide">
            <a href="/signout">
              <i className="fas fa-sign-out-alt"></i>
            </a>
            </div>
 </nav>

Sample Code:

编辑：应用@amirify 建议的样式后，第三列创建为 576px。

Answer 1

在您的 media query.

中添加此规则

@media (max-width: 576px) {
  nav {
        width: 100% !important;
      }
  .mainSectionContainers {
        width: 100% !important;
      }
 }

Bootstrap 媒体查询在 576px 下不工作

Bootstrap Media Query not working at 576px

html

css

media-queries

twitter-bootstrap