导航栏固定顶部取消.container居中

Question

为什么twitter bootstrap的navbar-fixed-top或navbar-fixed-bottom会使navbar全宽并取消.container将navbar居中的效果？ 见下面的代码

<div class="container">
  <nav class="navbar navbar-fixed-top navbar-full navbar-dark bg-inverse">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

有人可以解释吗？

Answer 1

您是否尝试将容器类添加到nav元素？

 <nav class="navbar navbar-fixed-top navbar-full navbar-dark bg-inverse container">
   <a class="navbar-brand" href="#">Navbar</a>
 </nav>

我想这应该会有所帮助，如果您使用css添加诸如text-center之类的自己的类：text-align：center; 那应该对你有帮助:)

Answer 2

我还是设法使其通过添加类工作container内<div class="navbar navbar-inverse navbar-fixed-top">

这就是我的代码的样子。

<div class="container">
    <div class="container navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                    <li><a href="#">Test</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

您可以在这里看到它的工作： Codepen