ブートストラップタブ

Question

私は動的なタブ付きディスプレイ用のブートストラップ3を使用していますを使用して色の変更と削除余白。しかし、私は各タブの背景色が異なるようにしたい。

どうすればいいですか？

さらに、私はその背景色は、タブ自体にシームレスに接続したいのですが。しかし、W3Schoolsのからこの例を使用して：https://jsfiddle.net/kjv2ytgj/3を：

<ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> 
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> 
</ul> 

<div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
    <h3>HOME</h3> 
    <p>Some content.</p> 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
    <h3>Menu 1</h3> 
    <p>Some content in menu 1.</p> 
    </div> 
    <div id="menu2" class="tab-pane fade"> 
    <h3>Menu 2</h3> 
    <p>Some content in menu 2.</p> 
    </div> 
</div> 

私はここに見られるように、自分自身とパディングタブ間を制御することができないよう余裕を持っています。

どのように私はそれを削除しますか？私の元の溶液

は、タブを含むグリッド・ブロックへの一般的な背景色を与える「ペイン」のスタイルを持っていることでしたが、その後、私は動的なタブコンテンツの背景色を持ってする方法を見つけ出すことはできません。

Answer 1

.tab-contentの見かけmarginは、（それが<h3>だ）、それはその最初の要素のmargin-top値よりも小さいpadding-top値を有し、第1の要素がdisplay:inlineを持っているという事実から来ています。

、それを修正.tab-contentまたは.tab-paneにpadding-top値を適用し、より大きな（または等しい）.tab-paneの最初の要素のmargin-topを、またはブロックレベル値に<h3>の表示プロパティを変更します。

---

第2の問題は、さまざまな状態でブートストラップタブの色を変えることは、より複雑で繊細な仕事です。詳細に細心の注意を払い、:hoverと:focusと:active州を含むCSSの特異性を深く理解する必要があります。

難易度が「悪」に設定されているCSSの問題を解消しない限り、セレクタを自分で作成するのではなく、ブートストラップテーマまたはオンラインテーマ作成者を使用する方がよいでしょう。これが必要なとき私が個人的に行うこと：ブートストラップテーマからコードを取得し、セレクタに触れることなく色を変更するだけです。

最後のステップとして、私は私が（以下の例では.orangeと.red）別の色を持ちたいタブやタブのペインにクラスを追加し、前のセットを上書きするbackground-colorプロパティのためのいくつかの強力なセレクタを書きました値：

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"); 
 
body { 
 
    background-color: #f3f3f3; 
 
} 
 
.nav-tabs.nav-justified { 
 
    border-bottom: 0; 
 
    margin-top: 20px; 
 
} 
 
.nav-tabs>li.active>a, 
 
.nav-tabs>li.active>a:focus, 
 
.nav-tabs>li.active>a:hover{ 
 
    text-align: center; 
 
    background-color: #444; 
 
    color: white; 
 
} 
 
.nav-justified > li > a { 
 
    text-align: center; 
 
    background-color: #444; 
 
    color: white; 
 
} 
 
.nav-tabs.nav-justified > .active > a, 
 
.nav-tabs.nav-justified > .active > a:hover, 
 
.nav-tabs.nav-justified > .active > a:focus { 
 
    border: 1px solid rgba(0,0,0,.35); 
 
} 
 
.nav-tabs>li>a:hover { 
 
    border-color: transparent; 
 
} 
 
.nav>li>a:focus, .nav>li>a:hover { 
 
    text-decoration: none; 
 
    background-color: #666; 
 
} 
 
@media (min-width: 768px) { 
 
    .nav-tabs.nav-justified > li > a { 
 
    border-bottom: 1px solid rgba(0,0,0,.35); 
 
    border-radius: 0 0 0 0; 
 
    } 
 
    .nav-tabs.nav-justified > .active > a, 
 
    .nav-tabs.nav-justified > .active > a:hover, 
 
    .nav-tabs.nav-justified > .active > a:focus { 
 
    border-bottom-color: transparent; 
 
    } 
 
} 
 
.tab-content .tab-pane { 
 
    padding: 20px; 
 
    background: #444; 
 
    color: white; 
 
} 
 

 
/* the rest if overriding theme background-color for colored tabs */ 
 

 
.nav-justified > li > a.orange, 
 
.nav-justified > li.active > a.orange, 
 
.nav-justified > li.active > a.orange:hover, 
 
.tab-pane.orange { 
 
    background-color: #f50 
 
} 
 
.nav-justified > li > a.orange:hover { 
 
    background-color: #d52; 
 
} 
 

 
.nav-justified > li > a.red, 
 
.nav-justified > li.active > a.red, 
 
.nav-justified > li.active > a.red:hover, 
 
.tab-pane.red { 
 
    background-color: #f00 
 
} 
 
.nav-justified > li > a.red:hover { 
 
    background-color: #d00; 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div class="row section"> 
 
    <div class="col-md-2"></div> 
 
    <div class="col-md-8 pane"> 
 
     <ul class="nav nav-tabs nav-justified"> 
 
     <li class="active"><a data-toggle="tab" href="#home"><img src="img/img1.png" height=75 alt="logo1"><br>My header text 1</a></li> 
 
     <li><a data-toggle="tab" href="#menu1" class="orange"><img src="img/img2.png" height=75 alt="logo2"><br>My header text 2</a></li> 
 
     <li><a data-toggle="tab" href="#menu2" class="red"><img src="img/img3.png" height=75 alt="logo3"><br>My header text 3</a></li> 
 
     </ul> 
 

 
     <div class="tab-content"> 
 
     <div id="home" class="tab-pane fade in active"> 
 
      <h3>HOME</h3> 
 
      <p>Some content.</p> 
 
     </div> 
 
     <div id="menu1" class="tab-pane fade orange"> 
 
      <h3>Menu 1</h3> 
 
      <p>Some content in menu 1.</p> 
 
     </div> 
 
     <div id="menu2" class="tab-pane fade red"> 
 
      <h3>Menu 2</h3> 
 
      <p>Some content in menu 2.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-2"></div> 
 
    </div> 
 
</div>