Question

我有三个这样的div：

<div class="container-fluid">
    <div class="header">
        Welcome
    </div>
    <div class="navbar">
        Menu
    </div>
    <div class="content">
        Website content
    </div>
</div>

现在，第一个div class="container-fluid"在所有浏览器窗口上展开。下一个class="header具有来自其父元素的某些像素的padding / margin。现在我希望这个div能够扩展所有浏览器窗口。但我也不希望下一个class="menu"或class="content"延长。

我该如何解决这个问题？

Answer 1

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

Answer 2

这听起来像是一个带有全宽标题的两列布局。您标记了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%;
}

Answer 3

使用.container for navbar and content＆amp; .row for .header喜欢这样： Demo

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

如何删除bootstrap div之间的空间

3 个答案: