html - navbar の背後にある Twitter ブートストラップの背景

Question

ブラウザの上部中央に浮かぶナビゲーションバーラッパークラスを持つナビゲーションバーがあります。その背後にある長方形のゾーンを青色で塗りつぶしたいと思います。どうすればいいですか？

ボディの前とナビゲーションバーの後ろに青い塗りつぶし領域を追加したいと思います。

UPDATE ボディの先頭に空のジャンボトロンを追加し、設定することで、私が望んでいたものと同様のことを行うことができました

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

それを回避する方法について何か考えはありますか？

更新簡単でした

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

score 0 · Accepted Answer

これの基本的な考え方は、z-index を使用することです。あなたは言った、体の前とナビゲーションバーの後ろ。

これを試して：

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

次に、z-index を使用して navbar をその上に浮かせることができます (ただし、各要素は常に本文の上に浮かんでいるので、これは必要ないことを覚えておいてください。ただし、それでも使用したい場合)

.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 の一部ではなく、div 全体の背景になります。

score 0 · Accepted Answer

あなたのnavbar-wrapperクラスが「navbar-wrapper」であると仮定します

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

または、リンク先の例のように

.navbar {
    background-color: blue;
}

2 に答える 2