我有三个类似的div：
<div class="container-fluid">
<div class="header">
Welcome
</div>
<div class="navbar">
Menu
</div>
<div class="content">
Website content
</div>
</div>
现在，第一个divclass="container-fluid"在所有浏览器窗口上都被拉伸。下一个class="header具有来自其父元素的一些像素的padding/margin。现在我想要这个div来扩展所有的浏览器窗口。但我也不希望下一个class="menu"或class="content"被拉长。
我该如何解决此问题？
使用.container for navbar and content&.row for .header如下：演示
<div class="row">
<div class="header col-xs-12 col-sm-12 ">Welcome</div>
</div>
<div class="row">
<div class="container">
<div class="navbar">Menu</div>
<div class="content">Website content</div>
</div>
</div>
这听起来像是一个带有全宽标题的两列布局。你标记了Twitter Bootstrap，所以我将解释如何使用这些风格来做你想做的事。
<div class="row container-fluid">
<div class="header">
Welcome
</div>
<div class="span3 navbar">
Menu
</div>
<div class="span9 content">
Website content
</div>
</div>
row类位于包装列的元素上。span#是为每列指定大小的类。因此，对于12个单位的宽度，可以将span3分配给导航栏，将span9分配给内容区域。
如果没有Bootstrap，这仍然相对简单。你可以在CSS中做到这一点。
.navbar {
display: inline-block;
width: 25%;
}
.content {
display: inline-block;
width: 75%;
}
<div class="container-fluid">
<div class="header">
Welcome
</div>
</div>
<div class="container">
<div class="navbar">
Menu
</div>
<div class="content">
Website content
</div>
</div>
在菜单和内容之外使用container类。希望这对你有帮助。
jsFiddle演示