twitter-bootstrap - Bootstrap 列在流体布局中重叠

Question

很长一段时间以来，我一直在努力弄清楚这是怎么回事，但没有成功。我已将我的代码剥离到我正在尝试实现的最基本示例，但无法弄清楚为什么我的列重叠而不是堆叠。

失败的 jfiddle 可以在这里找到。 http://jsfiddle.net/rB9Md/

 <div class="container-fluid">
    <div class="row-fluid">
        <div class="span4">
            <div style="border:1px solid black; min-width:400px; width:400px">
                span4
            </div>
        </div>
        <div class="span4">
            <div style="border:1px solid red; min-width:400px; width: 400px">
                span4
            </div>
        </div>
        <div class="span4">
            <div style="border:1px solid green; min-width:400px; width: 400px">
                span4
            </div>
        </div>
    </div>
</div>

为什么列没有按预期堆叠？ 我在不同的地方尝试了多种宽度、最大宽度、最小宽度的变化，但都没有成功。 我假设一旦 span4 列缩小到小于内容设置宽度，它就会堆叠....

Answer 1

http://jsfiddle.net/ZRpSZ/1/

在这种情况下，您不想使用 min-width、width 样式，如果可以避免的话。

Bootstrap 的 span4 已经使该列跨度为屏幕宽度的 33% (4/12)，或者如果屏幕宽度太小则折叠。使用 bootstrap 时，您希望尽可能多地使用网格系统来布局您的列。有关引用，请参阅 this .

如果您始终需要 400 像素宽的列，您将无法在大多数屏幕宽度下并排显示它们。因此，您应该考虑您希望的响应速度。

The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

当列堆叠时，您可以设置 max-width:400px，以便它们保持只有那个宽度。