我的网站上有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
更稳定。