如何集中Bootstrap網格

Question

在我的網站上，我在頁面頂部有一個欄。它包含一些音樂播放器元素。他們將被保存在3列。我想將這個欄全部留在頁面的頂部，但網格保持在中間。

<div class="container navbar-inverse navbar-fixed-top" style="height:50px;"> 
     <div class="row"> 
     <div class="col-md-2"> 
       <div class="playerButton pre"></div> 
       <div class="playerButton play" onClick="play()"></div> 
       <div class="playerButton next"></div> 
     </div> 
     <div class="col-md-8">  
       <div class="waveBar"> 
        <div class="waveBarTheme"></div> 
        <div class="waveBarPlayed"></div> 

       </div> 
     </div> 
     <div class="col-md-2"> 
       <div class="playerButton unmute"></div> 
       <div class="playerButton repeat"></div> 
       <div class="playerButton addToPlaylist"></div> 
       <div class="playerButton screen"></div> 
       <div class="playerButton share"></div> 
     </div> 
      </div> 

</div> 

DEMO：http://jsfiddle.net/danials/b88mc56g/

任何主意，有中央的直板全寬和網格？

Answer 1

您必須將容器（這是限制寬度）從導航欄中分離出來。就像這樣：

<div class="navbar-inverse navbar-fixed-top" style="height:50px;"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-2"> 
       <p>Left box</p> 
      </div> 
      <div class="col-md-8"> 
       <p>Center box</p> 
      </div> 
      <div class="col-md-2"> 
       <p>Right box</p> 
      </div> 
     </div> 
    </div> 
</div> 

Updated JSFiddle