當激活導航標籤頁時更改按鈕邊框

Question

我在引導面板中使用導航標籤頁。

在第一個按鈕處於活動狀態時，在面板標題上，左側和頂部的邊框較粗。

問：什麼都按鈕激活我怎麼能保證它不 秀雙厚度在邊境。

JSFiddle Example

.panel.with-nav-tabs .panel-heading { 
    padding: 5px 5px 0 5px; 
} 
.panel.with-nav-tabs .nav-tabs{ 
    border-bottom: none; 
} 

.panel.with-nav-tabs .nav-justified{ 
    margin-bottom: -1px; 
} 

.panel.with-nav-tabs .panel-heading { 
    background-color: #fafbfc; 
    border-bottom: 1px solid #e1e4e8; 
    border-top-left-radius: 2px; 
    border-top-right-radius: 2px; 
    padding-left: 0; 
    padding-top: 0; 
} 

.panel.with-nav-tabs .nav-tabs > li > a { 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    border-radius: 0; 
} 

.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:hover, 
.nav-tabs > li.active > a:focus { 

} 

HTML

<div class="panel with-nav-tabs panel-default"> 
    <div class="panel-heading"> 
    <ul class="nav nav-tabs"> 
    <li class="active"><a href="#tab1default" data-toggle="tab">Default 1</a></li> 
    <li><a href="#tab2default" data-toggle="tab">Default 2</a></li> 
    </ul> 
    </div> 
    <div class="panel-body"> 
    <div class="tab-content"> 
    <div class="tab-pane fade in active" id="tab1default">Default 1</div> 
    <div class="tab-pane fade" id="tab2default">Default 2</div> 
    </div> 
    </div> 
</div> 

Answer 1

你看到的是在面板標題邊框設置，與上設置單獨的邊框相結合標籤（標籤）。您需要明確禁用選項卡上的邊框：

/*disable the top border on all tabs*/ 
.panel.with-nav-tabs .nav-tabs > li > a { 
    border-top: none; 
} 

/*the first tab has an additional left border which is not needed 
    since it can "take" the border of the header*/ 
.panel.with-nav-tabs .nav-tabs > li:first-of-type > a { 
    border-left: none; 
} 

檢出this fiddle。

如果您有更多的選項卡，並且它們將運行到面板的右側，則可以爲「最後一個類型」添加一條附加規則並取出右邊框。