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

演示： 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>

更新了JSFiddle