导航栏后面的Twitter引导背景

Question

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

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

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

更新我已经设法通过在身体的开头添加一个空的超大加速器并通过设置来完成与我想要的操作类似的操作

.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的背景，而不只是一小部分。