Question

为什么Twitter引导程序navbar-fixed-top或navbar-fixed-bottom会使导航栏全宽并取消导航栏中心的.container的效果？见下面的代码

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

navbar-fixed-top取消.container居中

2 个答案: