布局问题，列下降到底部答案

【问题标题】：Layout issue, column drop to bottom布局问题，列下降到底部
【发布时间】：2013-04-13 05:49:00
【问题描述】：

我对 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 似乎可以解决问题，但根据引导手册，您需要一个具有container-fluid 类的div 容器

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

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

在 Twitter Bootstrap 中，.well 类有填充，这为 span 类的内容提供了额外的宽度。

解决办法是：

.well {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;    
}

http://jsfiddle.net/uAs6k/305/

【讨论】：

我接受 ngm 答案，因为它依赖于 css3，顺便说一句，我再次支持你的答案..thx

【解决方案2】：

如果您使用的是行，则需要将 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。

【讨论】：