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

Posted 2023-03-06

【中文标题】引导媒体查询在 576 像素时不起作用

【英文标题】：Bootstrap Media Query not working at 576px

【发布时间】：2021-10-12 02:20:05

【问题描述】：

我的底部导航栏样式根本没有应用到 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"  />
              </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 像素处创建第三列。

【问题讨论】：

能否提供相关的HTML？我不确定我是否相信 bootom - 真的是这样吗？查看浏览器的开发工具以了解实际应用的 CSS 会有所帮助。

@AHaworth 编辑了问题。请检查。

【参考方案1】：

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

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

【讨论】：

@YogeshYadav 我在codesandbox 中完成了它，并且成功了。你确定你把它放在媒体查询中吗？

你能分享你的分叉沙箱吗？请。

在 style.css codesandbox.io/s/twitter-responsive-ui-forked-hpkbr?file=/src/…

我试过了，很有魅力！谢谢。如果您告诉我如何删除现在以 576px 显示的第三列，我将不胜感激。

@YogeshYadav 你的意思是通知（铃）图标吗？我更新了沙盒。看看吧。