ブートストラップモバイルヘッダーの整列の問題

Question

私は単純なはずのものを見つけようとしていますが、正しく動作するようには見えません。私は、私が守ろうとしているデザインを持っており、それを正しく整列させることができないようです。

これは私がそれを見せたいものです。

私の問題は、それは私が欲しいもののようなものを揃えるはありません。私はさまざまな方法を経てきました。これが私の最新の試みであり、私はフロントエンドの助けを求めるでしょう。ホームボタンは単なるリンクです。検索ボタンは、下の例ではまだコード化されていない検索フィールドでdivを開きます。ハンバーガーメニューで他のヘッダーリンクが開きます。

ここに私がいて、あなたはそれが本当に近くにいかないかを見ることができます。私はこれがよりexpereincedフロントエンド開発者のための非常に簡単です推測していますよう

http://jsbin.com/fucozulecu/edit?html,css,output

CSS

.navbar-nav { 
     float: none; 
     text-align: center; 
    } 

.navbar-nav li { 
    float: none; 
    display: inline-block; 
    width: 33%; 
    color: white; 
} 

HTML

<nav class="navbar navbar-inverse" role="navigation"> 
    <div class="navbar-header"> 
     <ul class="nav navbar-nav"> 
      <li> 
       <a href="/"> 
        <button type="button" class="navbar-toggle btn-home visible-sm visible-xs"> 
         <span class="glyphicon glyphicon-home"></span> 
        </button> 
       </a> 
      </li> 
      <li> 
       <button type="button" class="navbar-toggle btn-search" data-toggle="collapse" 
         data-target=".navbar-search"> 
        <span class="glyphicon glyphicon-search"></span> 
       </button> 
      </li> 
      <li> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </li> 
     </ul> 
    </div> 
    <div class="collapse navbar-collapse navbar-menubuilder"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
    <!-- /.navbar-collapse --> 
    <div class="collapse navbar-collapse navbar-search"> 
     <ul class="nav navbar-nav navbar-search"> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
    </div> 
    <!-- /.navbar-collapse --> 

</nav> 

任意の助けいただければ幸いです。

Answer 1

ブートストラップを使用しているので、私はブートストラップグリッドクラスを追加し、ホームボタンを再配置しました。

<ul class="nav navbar-nav row"> 
    <li class="col-xs-4"> 
      <button type="button" class="navbar-toggle btn-home visible-sm visible-xs"> 
         <a href="/" class="nav-btn"><span class="glyphicon glyphicon-home"></span> </a> 
      </button> 
    </li> 
    <li class="col-xs-4"> 
     <button type="button" class="navbar-toggle nav-btn" data-toggle="collapse" 
       data-target=".navbar-search"> 
      <span class="glyphicon glyphicon-search"></span> 
     </button> 
    </li> 
    <li class="col-xs-4"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
    </li> 
</ul> 

ウォーキング例http://jsbin.com/quxawovude/1/edit?html,css,output