Question

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

<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

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

这两个例子应该清楚：

使用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>

Bootstrap2选项卡导航：选项卡内容div位置

1 个答案: