html - 如何删除 Bootstrap div 之间的空间

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" 在所有浏览器窗口上被拉伸(stretch)。下一个 class="header 从他的父元素开始有一些像素的 padding/margin。现在我想要这个 div 拉伸(stretch)所有浏览器窗口。但我也不希望下一个 class="menu" 或 class="content" 被拉伸(stretch)。

我该如何解决这个问题？

Answer 1

将 .container 用于导航栏和内容 & .row 用于 .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>