Bootstrap：为什么标签内容区域被推离标签？

Question

我正在学习 Bootstrap。我有一种奇怪的情况，标签内容从标签中向下推。

页面布局很简单。一个菜单向左浮动，主要内容有一个左边距来容纳菜单。

在主要内容区域，我有一个 Bootstrap 选项卡组件。

但是，选项卡的内容区域被垂直向下推。代码如下：

<div style="width: 100px; float:left;height:300px;background-color:red;">
    left
</div>

<div style="margin-left: 120px; background-color: pink">

    <div class="tabbable">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tab1">
          <p>I'm in Section 1.</p>
        </div>
        <div class="tab-pane" id="tab2">
          <p>Howdy, I'm in Section 2.</p>
        </div>
      </div>
    </div>

</div>

在http://jsfiddle.net/dDNBS/7/查看它

我不知道为什么。如何解决？

Answer 1

我在 http://jsfiddle.net/dDNBS/7/ 更新了你的 js fiddle。

代码：

<div class="container">
  <div class="row">        
     <div style="background-color:red;height:150px;" class="span3">
       left
     </div>
     <div style="background-color: pink;height:150px;" class="span9">
          <div class="tabbable">
             <ul class="nav nav-tabs">
                <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
                <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
             </ul>
             <div class="tab-content">
              <div class="tab-pane active" id="tab1">
                <p>I'm in Section 1.</p>
              </div>
              <div class="tab-pane" id="tab2">
                <p>Howdy, I'm in Section 2.</p>
              </div>
             </div>
          </div>
     </div>
  </div>
</div>

由于您使用的是引导程序，因此您必须使用 span 类来维护 div 的内联。默认引导网格布局分为 12 个跨度，所以这里我将左侧由 span3 和右侧的 tabbable 由 span9 分割，并放入一个行类以适应容器类。