引导媒体查询在 576 像素时不起作用

Question

我的底部导航栏样式根本没有应用到 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 中，我使用引导断点 sm，根据引导程序 official doc，其尺寸≥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 建议的样式后，在 576 像素处创建第三列。

Answer 1

在您的media query 中添加此规则。

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