Html 如何集中引导网格

在我的网站上，我在页面顶部有一个栏。它包含一些音乐播放器元素。它们将分为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>

演示：

---

有没有办法让导航栏全宽并在中心放置网格？

您必须将容器（限制宽度的部分）与导航栏分开。像这样：

<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>

左框

中心盒

右框