ブートストラップのナビゲーションバーに1つのliを表示する

Question

ブートストラップには標準のnavbarがあります。それが崩壊すると、私はハンバーガーのメニューボタンだけを見て、すべての李は下に折り畳まれています。

<nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li><a href="/">Home</a></li> 
        <li><a href="/store">Store</a></li> 
        <li><a href="/blog">Blog</a></li> 
        <li><a href="/about">About</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

それは（モバイル/小画面）を崩壊私はハンバーガーメニューの左ナビゲーションバーの上部に見える滞在する「ストア」リンクのためにしたいと思います。ブートストラップのクラスを使用してこれを行うことはできますか、または手動で@media経由で行う必要がありますか？

Answer 1

ここで私は解決策を得ました。

<div class="navbar-header"> 

後と

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
</button> 

HereがJsFiddleである前にボタンを入れてみてください。私は基本的に何をしたか：

<nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
    <div class="container"> 

     <div class="navbar-header"> 
     <button type="button" class="btn btn-default hidden-lg hidden-md hidden-sm" aria-label="Left Align" href="/store"> 
      Store 
     </button> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
       <li><a href="/">Home</a></li> 
       <li><a href="/store">Store</a></li> 
       <li><a href="/blog">Blog</a></li> 
       <li><a href="/about">About</a></li> 
      </ul> 
     </div> 
    </div> 

希望を私はあなたと私の答えはあなたの問題を解決し助けることができます。 :)