Question

首先，这里是小提琴：http://jsfiddle.net/krish7878/a2f03jrg/

没有任何花哨的东西，只有常规的bootstrap 3选项卡与背景颜色。每个标签的两侧似乎都有1px的空间，我无法将其删除。我尝试过边距，填充：0px＆＃39;，＆＃39; float：left＆＃39;。

任何帮助将不胜感激。

HTML代码：

  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#popular" role="tab" data-toggle="tab">Popular</a></li>
    <li><a href="#recent" role="tab" data-toggle="tab">Recent</a></li>
    <li><a href="#comments" role="tab" data-toggle="tab">Comments</a></li>
  </ul><!-- /.nav-tabs -->
  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane fade in active" id="popular">
        popular - some content will go in here
    </div><!-- /.tab-pane -->
    <div class="tab-pane fade" id="recent">
        Some Content Will obviously come here
    </div><!-- /.tab-pane -->
    <div class="tab-pane fade" id="comments">
        Some Content Will obviously come here
    </div><!-- /.tab-pane -->
  </div><!-- /.tab-content -->

CSS代码：

ul.nav-tabs li.active a{
border-top: 3px solid #49c8ff;
border-radius: 2px;
}
ul.nav-tabs li.active:hover a{
    border-top: 3px solid #49c8ff;
}
ul.nav-tabs li a{
    background-color: #eee;
}

Answer 1

链接周围的边距来自bootstrap样式表中的此规则：

.nav-tabs>li>a {
   margin-right: 2px;
}

您可以使用以下内容覆盖：

ul.nav-tabs li a{
    background-color: #eee;
    margin-right: 0;
}

更新了小提琴：http://jsfiddle.net/a2f03jrg/1/

删除Bootstrap 3选项卡之间的空间

1 个答案: