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





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

最佳答案

要使用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更稳定。

09-10 11:38
查看更多