부트 스트랩 탭을 사용하여 색상 변경 및 여백 제거

Question

동적 탭 표시를 위해 부트 스트랩 3을 사용하고 있습니다. 그러나 각 탭마다 다른 배경색을 사용하고 싶습니다.

어떻게하면됩니까?

또한 배경색을 탭 자체에 완벽하게 연결하고 싶습니다. 그러나, W3 스쿨에서이 예제를 사용 : 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> 

내가 여기 볼 수 있듯이, 자신과 패딩 탭 사이를 제어 할 수없는 것 여백이있다.

어떻게 제거하나요?

내 원래의 솔루션은 탭이 포함 된 격자 블록에 일반적인 배경색을 제공하는 "창"스타일 이었지만 동적 탭 콘텐츠 배경색을 갖는 방법을 알아낼 수 없었습니다. .tab-content의

Answer 1

겉보기 margin는 그것의 첫 번째 요소의 값보다 margin-toppadding-top 작은 값을 갖는다는 사실에서 유래하고, 제 1 요소 (그것은 <h3> 'S) display:inline있다.

이를 해결하기 위해, .tab-pane에 .tab-content 또는 .tab-pane,보다 큰 (또는 동일한) 제 요소의 margin-top에 padding-top 값을 적용, 또는 블록 레벨 값 <h3>의 디스플레이 속성을 변경.

---

두 번째 문제는 다양한 상태에서 부트 스트랩 탭의 색상을 변경하는 것이 더 복잡하고 섬세한 작업입니다. 세부 사항에 세심한주의를 기울여야하며 :hover 및 :focus 및 :active 상태를 비롯하여 CSS 특수성을 깊이 이해해야합니다.

난이도가 "악"인으로 설정된 CSS 챌린지에서 벗어나지 않는 한 셀렉터를 직접 작성하는 대신 부트 스트랩 테마 또는 온라인 테마 작성자를 사용하는 것이 좋습니다. 내가 개인적으로해야 할 일 : 부트 스트랩 테마에서 코드를 가져와 셀렉터를 건드리지 않고 색상 만 변경합니다.

는 마지막 단계로, 나는 (아래 예 .orange 및 .red) 다른 색깔을 갖고 싶어 탭과 탭 창에 클래스를 추가하고 이전 설정을 오버라이드 (override)하는 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>