激活导航标签

Question

我在引导程序面板中使用了nav-tabs。

当第一个按钮处于活动状态时，在面板标题上，左侧和顶部的边框较粗。

  

问题：什么按钮处于活动状态我怎样才能确保它没有   在边框显示双倍厚度。

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。

如果您有更多标签页并且他们会跑到面板的右侧，您可以为＆＃34;最后一个标签＆＃34;添加额外的规则。并取出正确的边界。