当激活导航标签页时更改按钮边框

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。

如果您有更多的选项卡，并且它们将运行到面板的右侧，则可以为“最后一个类型”添加一条附加规则并取出右边框。