html - CSS - 调整窗口大小时无法将 span 3 和 span9 保持在同一行

Question

我在我的 RoR 元素中使用 Bootstrap 。我有 2 列，span3 和 span9，它们在调整浏览器窗口大小时移动:span9 落在下方，然后返回到另一个跨度的一侧。

这是代码，但是由于某种原因显示的结果不同:http://jsfiddle.net/jUJn7/3/

HTML:

      <div class="row">
        <div class="span3 well" style="min-height:600px;">
        </div>
        <div class="span9 well" style="min-height:600px;">
        </div>
      </div>

我希望 2 个 span 保持在同一行中。 span3 的宽度必须固定为 300px，span9 必须自行调整以适应窗口中的剩余空间。

我已经尝试了所有其他相关问题的解决方案，但都没有成功，我已经尝试解决这个问题好几个星期了，所以我将不胜感激!

Answer 1

固定span3和灵活span9

html:

  <div class="row">
    <div class="span3 well" style="min-height:600px;">
    </div>
    <div class="span9 well" style="min-height:600px;">
    </div>
  </div>

CSS:

.span3 {
  float: left;
  width: 300px;
}
.span9 {
  margin-left: 350px;
}