Question

我正在使用bootstrap，当我使用Tab插件时，我有一个页面让我遇到麻烦。标签主体被推下比实际标签低大约400px。它只发生在这一页上，大多数其他页面非常相似，使用相同的选项卡插件，但它们不会造成太多问题。

标签代码：

  <ul class="nav nav-tabs">
    <li class="active"><a href="#entireAsset" data-toggle="tab">Entire Asset</a></li>
    <li><a href="#entireSite" data-toggle="tab">Entire Site</a></li>
    <li><a href="#singleService" data-toggle="tab">Single Service</a></li>
  </ul>

  <!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="entireAsset">
    <p>Hello tab 1</p>
  </div><!--End Entire Asset tab-->
  <div class="tab-pane" id="entireSite">
    <p>Hello tab 2</p>
  </div>
  <div class="tab-pane" id="singleService">
    <p>Hello tab 3</p>
  </div>
</div>

jsFiddle：http://jsfiddle.net/f2TG8/

我的css和所有资源都在JSFiddle中。

Answer 1

类.nav的问题是:after和:before样式会产生这样的空白区域。你可以将它添加到你的css：

.nav {
  overflow:hidden;
}

观看演示 http://jsfiddle.net/f2TG8/2/

Bootstrap标签主体被向下推

1 个答案: