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），如果屏幕宽度太小，则会崩溃。使用引导程序时，您希望使用网格系统尽可能多地布置列。有关参考，请参阅this。

如果您需要列宽为400px，则无法在大多数屏幕宽度中并排显示这些列。所以你应该考虑你希望的反应能力。

  

默认的Bootstrap网格系统使用12列，制作一个   940px宽的容器，未启用响应功能。随着   添加了响应式CSS文件，网格适应724px和1170px宽   取决于您的视口。低于767px视口，列成为   流体和垂直堆叠。

当列堆叠时，您可以设置max-width:400px，使它们只保留那么宽。