Twitter 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>

左边




我在第一区

你好，我在第二区

见

---

我不明白为什么。如何修复它？

我在更新了你的js小提琴

代码：

左边




我在第一区

你好，我在第二区

---

因为您使用的是引导，所以必须使用span类来维护div的内联。默认的引导网格布局有12个跨距的划分，因此这里我将左侧按span3拆分，右侧按span9拆分，并将其放入一个row类中以适合容器类。

prem，我理解span3和span9。为什么在这种特殊情况下我必须使用引导网格？再次感谢！问题是左侧红色div的高度会影响右侧粉色div，但在这里，您要求提供自己的区域宽度，然后自定义并下载引导，我必须使用我的布局代码，也不能使用引导的默认或自定义布局代码。我只是对“左侧红色div的高度影响右侧粉色div”感到困惑。这首先会发生什么？谢谢。因为红色div heght应用于整个页面，所以我们必须明确地说，粉色div是另一个div，它属于单独的span，并与前一个div内联。所以解决方案是

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