如何使Bootstrap navbar半響應？

Question

我需要我的Bootstrap導航欄始終顯示一些元素，並自動摺疊其他元素。如何才能做到這一點？

Answer 1

只需在class="collapse"項目之外創建另一個列表（navbar-nav）即可。

在以下示例中，link1/2將始終可見，而link3/4將在小型設備上摺疊：JS Fiddle preview。

CSS

#navbar1 > li { 
    float: left; 
} 

HTML

<nav class="navbar navbar-default" role="navigation"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
     <ul class="nav navbar-nav" id="navbar1"> 
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 2</a></li> 
     </ul> 
    </div> 
    <div class="collapse navbar-collapse" id="navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">Link 3</a></li> 
      <li><a href="#">Link 4</a></li> 
     </ul> 
    </div> 
</nav>