如何集中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