如何为 UI Bootstrap 选项卡指令填写选项卡背景？答案

【问题标题】：How to fill in tab backgrounds for the UI Bootstrap tab directive?如何为 UI Bootstrap 选项卡指令填写选项卡背景？
【发布时间】：2015-01-16 19:55:24
【问题描述】：

我的网站上有 UI Bootstrap 选项卡 (http://angular-ui.github.io/bootstrap)，但它的样式似乎有点未完成。

所以我完成了底部的边框框，它看起来像这样： http://plnkr.co/edit/wq3vTkR3CqQQSmG9gbW1?p=preview

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">   
        a:focus {
            outline: none;
        }                
    </style>    
  </head>
  <body>

<div ng-controller="TabsDemoCtrl" style="padding: 20px">

  <tabset justified="true">
    <tab heading="Info 1"><div style="border: 1px solid #ddd; border-radius: 0 0 5px 5px; padding: 10px">Justified content</div></tab>
    <tab heading="SJ"><div style="border: 1px solid #ddd; border-radius: 0 0 5px 5px; padding: 10px">2222</div></tab>
    <tab heading="Long Justified"><div style="border: 1px solid #ddd; border-radius: 0 0 5px 5px; padding: 10px">3333</div></tab>
  </tabset>
</div>
  </body>
</html>

但是现在：

如何消除内容顶部选项卡底部的 2px 粗线？

如何将非活动标签设置为具有这样的背景：

【问题讨论】：

标签： css angularjs angular-ui-bootstrap

【解决方案1】：

要使用ui-bootstrap 解决此问题，需要添加一些样式来覆盖默认样式：

见example

.nav-tabs.nav-justified > li {
  padding-bottom: 0 !important;
}
.nav-tabs.nav-justified > li > a {
  margin-left: 2px ;
  top: 1px;
  border: none;
}
.nav-tabs.nav-justified > li:first-child > a {
  margin-left: 0;
}
.nav-tabs.nav-justified > li > a:link {
  background: #eee;
}

这应该很好用，但是...不建议使用此选项，因为如果 ui-bootstrap 库的新更新即将到来，那么您的样式可能会崩溃并且需要手动更新）

取而代之的是，您可以考虑使用angular-strap，它在生产中接缝比ui-bootstrap 在这些天（撰写此答案的那天）更稳定。

【讨论】：