如何：非折叠导航项Bootstrap 3

Question

我已经在SO上搜索了高和低，但没有找到“正确”的答案。

就想通了自己..思来分享这一点，希望它可以帮助别人..

问题与BS3是，它是移动第一，这是一件好事，通常..这只是我需要一个不管崩溃状态如何，导航栏中几乎没有“默认”选项。就像BS2一样。

那么我们该怎么做呢？

Answer 1

有一点很明显，看着html代码，.navbar-header保持它在哪里，它不崩溃。另一件事，魔术崩溃按钮有一些隐藏自己的方式，可能CSS但嘿，这个想法是抽象这一层，所以我们不必担心它..

但我们可以利用这一点，让我们把我想要显示的链接放在那里，它们不会崩溃。

你会看到的是你的列表项目将垂直结束，这不是你想要的。那么为什么它会这样做呢？

那么..如果你使用Firebug或其他开发检查员，你会发现这些项目已被设置为display : block;，这使他们的屏幕宽度推下每个下一个项目。

我们需要改变这种行为。所以让我们在ul中添加一个新类，我们可以在我们的自定义CSS中定义这个类。我把它命名为no-collapse，但你可以将其命名为任何你想要的..

<nav role="navigation" class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" data-toggle="collapse" data-target="#bs-navbar-collapse" class="navbar-toggle"> 
      <span class="sr-only">Hamburger menu</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="#" class="navbar-brand glyphicon glyphicon-home" title="Home"></a> 
     <!-- THIS IS WHERE THE MAGIC HAPPENS! --> 
     <ul class="nav navbar-nav no-collapse"> 
     <li><a href="#">Apple</a> 
     </li> 
     <li><a href="#">Banana</a> 
     </li> 
     </ul> 
    </div> 
    <!-- THE STUFF IN THIS DIV WILL COLLAPSE.. --> 
    <div id="bs-navbar-collapse" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">More Fruits <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li class="dropdown-header">Citrus</li> 
      <li> 
       <a href="#">Lemon</a> 
      </li> 
      <li> 
       <a href="#">Orange</a> 
      </li> 
      <li class="divider"></li> 
      <li class="dropdown-header">  
       Also a fruit 
      </li> 
      <li> 
       <a href="#">Tomato</a> 
      </li> 
      </ul> 
     </li> 
     <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Veggies <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li class="dropdown-header">Green stuff</li> 
      <li> 
       <a href="#">Spinache</a> 
      </li> 
      <li> 
       <a href="#">Lettuce</a> 
      </li> 
      <li class="divider"></li> 
      <li class="dropdown-header">Other stuff</li> 
      <li><a href="#">Carrot</a> 
      </li> 
      <li><a href="#">Romenesko broccoli</a> 
      </li> 
      </ul> 
     </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li> 
      <a href="#">This works</a> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

你需要修改，添加CSS（以下/ SASS）后引导样式表。

添加这个CSS：

.no-collapse li, .no-collapse li a 
{ 
    text-align : center; 
    float  : none; 
    display  : inline-block; 
} 

现在Bootply它应该是这样的：http://www.bootply.com/render/133885源位置：http://www.bootply.com/133885

现在我们可以有健康的苹果和香蕉对我们的移动设备的屏幕，不上诉诸汉堡菜单！