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。

如何删除它？

我原来的解决方案是拥有一个＆＃34;窗格＆＃34;为包含选项卡的网格块提供一般背景颜色的样式，但是我无法弄清楚如何获得动态标签内容背景颜色。

Answer 1

margin的明显.tab-content来自于其padding-top值小于其第一个元素的margin-top值，第一个元素具有display:inline {1}}（＆＃39; sa <h3>）。

要解决此问题，请将padding-top值应用于.tab-content或.tab-pane，大于（或等于）{{1}中第一个元素的margin-top或者，将.tab-pane的显示属性更改为块级别值。

第二个问题，改变各种状态下引导标签的颜色，是一个更复杂和微妙的工作。您需要密切关注细节并深入了解CSS特异性，包括<h3>和:hover以及:focus状态。

除非您在解决难题级别设置为＆＃34; evil＆＃34; 的情况下解决问题，否则您最好使用Bootstrap主题或在线主题创建者引导而不是自己编写选择器。我个人在需要时做的事情：我从Bootstrap主题获取代码，只改变颜色，而不是触及选择器。

作为最后一步，我在选项卡和tab-panes中添加了类，我希望在下面的示例中使用不同的颜色（:active和.orange）并为其创建一些更强的选择器.red属性覆盖以前的设置值：

＆＃13;

background-color

＆＃13;

@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;
}

＆＃13;

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

1 个答案: