如何填寫UI Bootstrap選項卡指令的選項卡背景？

我在我的webiste上有UI Bootstrap選項卡（http://angular-ui.github.io/bootstrap），但它的風格似乎有點未完成。如何填寫UI 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

來源

2015-01-15 Edward Tanguay

爲此使用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（寫這個答案的日子）。

來源

2015-01-16 11:18:00 Egel

如何填寫UI Bootstrap選項卡指令的選項卡背景？

回答

相關問題