css - 布局问题，列下降到底部

Question

我对 twitter bootstrap 很陌生，我尝试做 2 列布局
这是我的代码:

<div class="container">
    <div class="row">
        <div class="span3 well">Content</div>
        <div class="span9 well">Content</div>
    </div>
<div>

不幸的是，第二列已被推到第一列的底部

Jsfiddle

将列的容器设为 row-fluid 似乎可以解决问题，但根据 Bootstrap 手册，您需要一个具有 container-fluid 类的 div 容器>

我想修复布局，所以我不想让容器表现得像流体容器。
有办法解决这个问题吗？

Answer 1

如果您使用的是行，则需要将span3 和 span9 div 内的孔。

<div class="container">
    <div class="row">
        <div class="span3">
            <div class="well">Content</div>
        </div>
        <div class="span9">
            <div class="well">Content</div>
        </div>
    </div>
<div>

因为它们在一个内使用时具有固定宽度正常行，将任何填充或边框添加到跨度 div 将使它们包裹起来。

或者，您可能希望修改 bootstrap css 本身，通过考虑边框并相应地减少边距，或者根据 Twitter Bootstrap - borders 更改 box-sizing 属性。 .请记住，box-sizing 不适用于某些浏览器，例如IE7.