0

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

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

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

提琴手

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

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

4

2 回答 2

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 添加任何填充或边框将导致它们换行。

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

于 2013-04-19T18:51:52.227 回答
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/

于 2013-04-19T18:52:38.903 回答