使用 Bootstrap 选项卡更改颜色和删除边距

Question

我正在使用 Bootstrap 3 进行动态选项卡式显示。但是，我希望每个选项卡的内容具有不同的背景颜色。

我该怎么做？

此外，我希望该背景颜色与标签本身无缝连接。但是，使用 W3schools 的这个例子：

<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>

我似乎无法控制选项卡本身和填充之间的边距，如下所示：https://jsfiddle.net/kjv2ytgj/3。

如何删除它？

我最初的解决方案是使用“窗格”样式为包含选项卡的网格块提供一般背景颜色，但后来我不知道如何使用动态选项卡内容背景颜色。

Answer 1

.tab-content 的明显margin 来自于它的padding-top 值小于其第一个元素的margin-top 值，并且第一个元素具有display:inline（它是<h3> )。

要修复它，请将padding-top 值应用于.tab-content 或.tab-pane，大于（或等于）.tab-pane 中第一个元素的margin-top，或更改<h3> 为块级值。

---

第二个问题，在各种状态下更改引导选项卡的颜色，是一项更加复杂和精细的工作。你需要密切关注细节并对 CSS 的特殊性有深刻的理解，包括 :hover 和 :focus 和 :active 状态。

除非您在难度级别设置为 "evil" 的情况下解决 CSS 挑战，否则最好使用 Bootstrap 主题或在线主题创建器来创建 Bootstrap，而不是自己编写选择器.当我需要这个时，我个人会做什么：我从 Bootstrap 主题中获取代码，只更改颜色，而不是触摸选择器。

作为最后一步，我向选项卡和选项卡窗格添加了类，我希望它们具有不同的颜色（在下面的示例中为.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>