html - 导航栏后面的 Twitter 引导背景

Question

我有一个带有 navbar-wrapper 类的导航栏，它使它浮动在浏览器的顶部中心。我想在它后面有一个填充蓝色的矩形区域。我该怎么做？

考虑这个页面http://lowcoupling.com/post/59130887987/defining-project-plans-and-gantt-charts-in-eclipse

我想在正文之前和导航栏后面添加一个蓝色填充区域。

更新 我已经设法通过在正文的开头添加一个空的 jumbotron 并设置

.jumbotron{
    margin-top:-90px;
    background-color:rgb(20,7,91);
}

问题是它有圆角，两个顶角留下一个恼人的空白，你可以看到http://lowcoupling.com/post/59130887987/defining-project-plans-and-gantt-charts-in-eclipse

关于如何解决它的任何想法？

更新 这很容易

.jumbotron{
    margin-top:-90px;
    background-color:rgb(20,7,91);
    border-radius:0px;
}

Answer 1

其基本思想可能是使用 z-index。你说，在身体之前和导航栏之后。

尝试这个：

body {
// write body font, font-size, color etc
}

然后你可以使用 z-index 使导航栏浮动在它上面（但请记住，每个元素总是浮动在主体上，所以你不需要这个；但如果你想使用它仍然可以）

.navbar {
z-index: 2; // 2 to make sure, that others stay under it always background-color: #hexforblue;
padding: 5px 10px; // to make it a rect.
}

使用后，导航栏后面会有一个矩形 div 浮动。

注意：这将是整个 div 的背景，而不仅仅是它的一小部分。

Answer 2

假设您的 navbar-wrapper 类是“navbar-wrapper”

.navbar-wrapper {
   background-color: blue;
}

或者，如果像您链接到的示例一样

.navbar {
    background-color: blue;
}