折叠除大尺寸以外的所有尺寸的导航栏答案

【问题标题】：Collapse navbar on all size except large折叠除大尺寸以外的所有尺寸的导航栏
【发布时间】：2017-04-15 05:58:20
【问题描述】：

我的项目中有一个简单的引导导航栏。如引导示例页面上演示的：https://getbootstrap.com/examples/navbar/

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

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

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

我尝试使用导航栏切换按钮上的visible-lg-block 和菜单项上的hidden-sm hidden-xs hidden-md，但它没有按预期工作。 carret 图标显示在品牌文本的右侧，而不是在导航栏的右侧。我试过用pull-right没有效果。

您对如何实现这一点有任何想法吗？

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

只需使用媒体查询覆盖导航栏 css 类，如下所示，将它们保持在折叠模式，直到最大尺寸 1200 像素。在 css 文件中添加以下 css 规则，并确保在 head 标记中的引导 css 文件链接之后添加此自定义 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;
      }
  }

示例代码：http://codepen.io/Nasir_T/pen/jVaQyX

【讨论】：