3

很长一段时间以来，我一直试图弄清楚发生了什么，但没有运气。我已将我的代码剥离为我正在尝试实现的最基本示例，并且无法弄清楚为什么我的列重叠而不是堆叠。

失败的 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 列缩小到小于内容集宽度，它将堆叠....

4

1 回答 1

4

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

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

Bootstrapspan4已经使该列跨越屏幕宽度的 33% (4/12)，或者如果屏幕宽度太小则折叠。使用引导程序时，您希望尽可能多地使用网格系统来布局列。供参考，请参阅此。

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

默认的 Bootstrap 网格系统使用 12 列，形成一个 940 像素宽的容器，没有启用响应功能。添加响应式 CSS 文件后，网格会根据您的视口调整为 724 像素和 1170 像素宽。在 767px 视口以下，列变得流畅并垂直堆叠。

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

于 2013-07-24T14:43:30.177 回答