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列缩小到比内容设置的宽度小，它就会堆叠...

- Shane

---

min-widthе’ҢwidthжӯЈеңЁе№Іжү°е®ғ...иҜ·з§»йҷӨеҶ…иҒ”ж ·ејҸгҖӮ - Schmalzy

Answer 1

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

在这种情况下，如果可以避免使用 min-width 和 width 样式，则最好不使用。

Bootstrap 的 span4 已经使该列跨越屏幕宽度的 33% (4/12)，或在屏幕宽度太小时折叠。使用 Bootstrap 时，尽可能使用网格系统来布局您的列。有关参考，请参见此处。

如果你需要让列始终具有 400px 的宽度，那么在大多数屏幕宽度中是无法将它们并排放置的。因此，您应该考虑您希望做到多少响应性。

默认 Bootstrap 网格系统使用 12 个列，容器宽度为 940 像素，未启用响应特性。添加响应 CSS 文件后，网格会根据视口大小自适应为 724 像素和 1170 像素。在小于 767 像素的视口上，列会变成流体并垂直堆叠。

当列垂直堆叠时，您可以设置 max-width:400px 以使其保持固定宽度。

- Alexander Mistakidis

---

这对我来说似乎不太实际。没有宽度，列会在约200像素左右变窄，然后再堆叠。它是在何时决定堆叠的？200像素让三列看起来很糟糕。但一旦它们堆叠起来，就没问题了。 - Shane

流动行适用于流动内容。如果您的列不是流动的，则不应使用它。话虽如此，Bootstrap网格小于1200px，因此除非更改Bootstrap中的尺寸或不使用Bootstrap，否则不会出现3个并排的400px列。 - Alexander Mistakidis

这里有一个不使用Bootstrap的版本，使用媒体查询，可能更适合您的需求：http://jsfiddle.net/nS6az/2/ - Alexander Mistakidis

400像素只是一个示例大小。我在页面上有3列，它们不会堆叠，直到它们变得非常小。它们可以很好地调整大小，但它们变得如此薄，以至于在给定的浏览器宽度下，将它们堆叠在一起看起来更好100倍。这是设计的意图。3列将为演示文稿而堆叠。我仍然不明白堆栈的触发器是什么。似乎他们只是决定在某个神奇的点上堆叠，这对我的目的没有好处。如果我知道，也许我可以操纵触发器。 - Shane

神奇的触发器称为“媒体查询”。 Bootstrap 所做的就是使用预定义的类和宽度定义它们，以使网络布局更容易。我在最后一个提到的 fiddle 中使用了一个简单的查询。 @media (min-width:1230px) 只有在宽度至少达到此大小时才执行 CSS 规则。 我选择了这个数字，因为这是 400px 列可以并排坐着的最小尺寸（带填充）。 您只需要找出适合您站点的数字即可。 - Alexander Mistakidis