活动导航选项卡时更改按钮边框

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。

如果您将有更多选项卡并且它们将运行到面板的右侧，您可以为“last-of-type”添加一个额外的规则并去掉右边框。