twitter-bootstrap - Bootstrap2标签导航：标签内容div位置

Question

我误解了为什么带有 ID="test1" 的 DIV 与左侧标签导航重叠，但带有 class="tab-content" 的 div 却没有。

这是我的例子

<div style="height: 160px;overflow: hidden;">
<div class="tabbable tabs-left" >

    <ul class="nav nav-tabs">
        <li class="active"> 
            <a href="#tab1" data-toggle="tab">tab1</a>
        </li>

    </ul>
    <div id="test1">
<div class="tab-content" >
    <div id="tab1" class="tab-pane active"> Content tab1 </div>
</div>
    </div>
</div>

Answer 1

选项卡内容具有 css 属性overflow: auto。选项卡是float: left，如果下一个元素是overflow: autodiv ，则会自动将其固定为浮动元素留下的宽度。它通常用于分成两列。

有了这两个例子就应该清楚了：

与overflow: auto：http: //jsfiddle.net/eugip9/tVLgj/

<div>
  <div class="a" style="width: 20%; float: left;">Whatever</div>
  <div class="b" style="overflow: auto">A very long text ... </div>   
</div>

没有overflow: auto：http: //jsfiddle.net/eugip9/HVPhD/

<div>
  <div class="a" style="width: 20%; float: left;">Whatever</div>
  <div class="b">A very long text ... </div>   
</div>