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

Question

我在我的 RoR 项目中使用引导程序。我有 2 列 span3 和 span9，它们在调整浏览器窗口大小时移动： span9 落在下方，然后返回到另一个 span 的一侧。

这是代码，但是由于某种原因显示的结果不同：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 个跨度保持在同一条线上。span3 必须有 300px 的固定宽度，span9 必须调整自身以适应窗口中的剩余空间。

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

Answer 1

固定跨度3和灵活跨度9

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