導航欄后面的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的背景，而不只是一小部分。