Bootstrap移動頭對齊問題

Question

我想弄清楚一些我認爲應該很簡單但我似乎無法讓它正常工作的東西。我有一個設計，我試圖遵循，似乎無法讓它正確對齊。

這就是我想要的樣子。

我的問題是它不會像對準我想要的任何東西。我經歷了很多不同的方式，這是我最近的嘗試，我會請求一些前端幫助。主頁按鈕只是一個鏈接。搜索按鈕將打開一個搜索字段未編碼的div，例如下面。漢堡菜單將打開其他標題鏈接。

這裏是我得到的，你可以看到它不是很接近。

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> 

任何幫助，因爲我猜這是相當容易的多expereinced前端開發者可以理解的。

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> 

Woking的例子http://jsbin.com/quxawovude/1/edit?html,css,output