Question

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

我希望能够将其折叠并仅显示小插图图标以在所有屏幕尺寸中展开“移动状态”菜单，除了大。

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

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

我尝试在菜单项的导航栏切换按钮和visible-lg-block上使用hidden-sm hidden-xs hidden-md，但它无法正常工作。 carret图标显示在品牌文字的右侧，而不是拉在导航栏的右侧。我试着用右拉而没有效果。

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

Answer 1

只需使用媒体查询覆盖navbar css类，如下所示，将它们保持在折叠模式，直到最大大小为1200px。在css文件中添加以下css规则，并确保在head标记中的bootstrap 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

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

1 个答案: