1

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

我正在将 Bootstrap 2.3.2 和 Ace Theme ( 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/

选项卡之间有空格。我对此感到困惑。花几个小时，无法弄清楚它为什么在那里。我想删除标签之间的空间。

请注意，<li>出于其他原因，我必须使用 display: inline-block 作为元素。

让我们假设我的 css 和 HTML 没有变化。我可以添加哪些额外的 CSS 来删除选项卡之间的空间？

谢谢并恭祝安康！

4

2 回答 2

5

中设置了一个边距bootstrap-combined.min.css。

尝试这个

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

JSFiddle

于 2013-09-30T00:36:07.357 回答
3

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

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

  • 设置负边距以删除内联空间
  • 在 ul 上设置 font-size 0，记录了一些问题
  • 或者只是使用浮点数而不是显示内联块
于 2013-09-30T00:45:07.503 回答