twitter-bootstrap - 不能全宽导航栏引导

Question

我想像这样制作全宽导航栏。这是我的代码：

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <!--brand and menu-->
        </div>
    </div>
</div>

CSS：

.navbar .container {
  width: 100% !important;
}

为什么它保持身体宽度（940px）？

Answer 1

使用container-fluid而不是container类。

容器类提供固定宽度的布局。关联

<div class="navbar">
    <div class="navbar-inner">
        <div class="container-fluid">
            <!--brand and menu-->
        </div>
    </div>
</div>

Answer 2

我无法对此进行测试，但这就是我将如何做到的。您首先需要更改父元素 body 的宽度：

body {
  width: 100%;
}

.navbar {
  width: 100%;
}

然后从这里开始，将其余内容放入带有类容器的 div 中：

<div class="container">
     Content Here
</div>

同时将此容器的 CSS 更改为：

.container {
  width: 80%;
  margin: auto;
}

我认为这会使导航栏的宽度变为整页，您可以根据 .container 宽度百分比更改中间内容宽度。希望这可以帮助。

Answer 3

对不起大家，我写max-width="1000px"在我的css代码上，所以我的标题不能全宽。

感谢您的热心帮助。