导航栏后面的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

假设您的navbar-wrapper类是'navbar-wrapper'

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

或者，如果您链​​接到

的示例

.navbar {
    background-color: blue;
}

Answer 2

这个的基本思路可能是使用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的背景，而不仅仅是其中的一小部分。