Question

我的网站上有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线？

enter image description here

如何将非活动标签设置为具有以下背景：

enter image description here

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

如何填写UI Bootstrap选项卡指令的选项卡背景？

1 个答案: