Question

我对twitter bootstrap很新，我尝试做2列布局
这是我的代码：

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

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

Jsfiddle

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

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

Answer 1

如果您正在使用行，则需要放置 span3和span9 divs内的井。

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

因为它们在a。中使用时具有固定的宽度正常行，向span divs添加任何填充或边框使它们包裹起来。

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

Answer 2

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

解决方案是：

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

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

布局问题，列从下到下

2 个答案: