Html 折叠除大尺寸外的所有尺寸的导航栏

我的项目中有一个简单的引导导航栏。如引导示例页面所示：

我希望能够将其折叠并仅显示小插入符号图标，以便在除大屏幕外的所有屏幕大小中展开“类似移动”菜单

我只想在大于1200px的屏幕上显示完整菜单

在我们的项目中，我们不能修改基本引导scss文件，因为它在子项目中被广泛使用

我尝试在导航栏切换按钮上玩

可见lg块

，在菜单项上玩

隐藏sm隐藏xs隐藏md

，但没有按预期工作。carret图标仅显示在品牌文本的右侧，而不是在导航栏的右侧。我试着向右拉，但没有效果

---

您知道如何实现这一点吗？

只需使用媒体查询覆盖navbar css类，如下所示，将它们保持在折叠模式，直到最大大小为1200px。在css文件中添加以下css规则，并确保在head标记中的bootstrap css file链接之后添加此自定义css文件

/*To keep the navbar collapsed on less or equal to 1200px screens size*/
   @media (max-width: 1200px) {
     .navbar-header {
          float: none;
      }

     .navbar-toggle {
          display: block;
      }

     .navbar-collapse {
          border-top: 1px solid transparent;
          box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
      }

     .navbar-collapse.collapse {
          display: none!important;
      }

     .navbar-collapse.collapse.in {
          display: block !important; 
      }

     .navbar-nav {
          float: none!important;
          margin: 7.5px -15px;
      }

     .navbar-nav > li {
          float: none;
      }

     .navbar-nav > li > a {
          padding-top: 10px;
          padding-bottom: 10px;
      }
  }

示例代码：