Question

在我的特定情况下，我对Bootstrap选项卡之间的空间感到困惑。

我正在使用Bootstrap 2.3.2和Ace主题（http://wrapbootstrap.com/preview/WB0B30DGR）来表示Web应用程序。

这是我的HTML：

    <div>
        <ul class="nav nav-tabs " id="my-tabs">
          <li><a href="#page-1" data-toggle="tab">1</a></li>
          <li><a href="#page-2" data-toggle="tab">2</a></li> 
          <li><a href="#page-3" data-toggle="tab">3</a></li> 
        </ul>
    </div>

    <div class="tab-content" id="my-panes">

        <div class="tab-pane" id="page-1">
            tab 1
        </div>  

        <div class="tab-pane" id="page-2">
            tab 2
        </div> 

        <div class="tab-pane" id="page-3">
            tab 3
        </div> 

    </div>

这是我的额外CSS：

#my-tabs.nav-tabs > li {
    display: inline-block;
    float: none;
}


#my-tabs.nav-tabs > li > a {
    padding: 8px 16px;
    margin:0;
}

以下是jsfiddle演示：http://jsfiddle.net/edAVC/5/

标签之间有空格。我很困惑。花几个小时，无法弄清楚它为什么存在。我想删除标签之间的空格。

请注意，由于其他原因，我必须使用display：inline-block for <li>元素。

我们假设我的CSS和HTML没有变化。我可以添加哪些额外的CSS来删除标签之间的空格？

谢谢和问候！

Answer 1

在bootstrap-combined.min.css中设置了保证金权利。

试试这个

#my-tabs.nav-tabs > li > a {
    padding: 8px 16px;
    margin:0;
    margin-right: -4px;
}

JSFiddle

Answer 2

这就是在线上设置元素的方式。您希望键入的单词之间的空格是空格吗？这些块之间的空间就像单词之间的空格。 - Source

根据这篇文章，你的选择是：

设置负边距以移除内嵌空间
在ul上设置font-size 0，记录一些问题
或者只是使用浮动而不是显示内联块

Bootstrap选项卡：选项卡之间的空间不明

2 个答案: