无法使用全宽导航栏引导程序

Question

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

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

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

<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

我很抱歉所有人，我在我的css代码上写max-width="1000px"所以我的标题不能全宽。

感谢您的帮助。