twitter-bootstrap Bootstrap 列在流体布局中重叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17836988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap columns overlapping in fluid layout
提问by Shane
I've been trying to figure out what is happening with this for quite some time with no luck. I have stripped my code down o the most basic example of what I'm trying a achieve and cannot figure out why my columns are overlapping and not stacking.
很长一段时间以来，我一直试图弄清楚这件事发生了什么，但没有运气。我已经剥离了我的代码，这是我正在尝试实现的最基本示例，但无法弄清楚为什么我的列重叠而不是堆叠。
The failing jfiddle can be found here. http://jsfiddle.net/rB9Md/
失败的 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>
Why are the columns not stacking as expected?? I have tried many variations of widths, max-width, min-width in various places with no success. I would assume that once the span4 column shrinks to be smaller than the contents set width it would stack....
为什么列没有按预期堆叠？我在不同的地方尝试了许多不同的宽度、最大宽度、最小宽度，但都没有成功。我会假设一旦 span4 列缩小到小于内容设置宽度，它将堆叠....
回答by Alexander Mistakidis
You don't want to use min-width, widthstyles in this case, if you can avoid it.
在这种情况下，您不想使用min-width,width样式，如果可以避免的话。
Bootstrap's span4is already going to make that column span 33% (4/12) of the screen width, or collapse if the screen width is too small. When using bootstrap, you want to use the grid system to layout your columns as much as you can. For reference, see this.
Bootstrapspan4已经使该列跨越屏幕宽度的 33% (4/12)，或者如果屏幕宽度太小则折叠。使用引导程序时，您希望尽可能多地使用网格系统来布局列。作为参考，请参阅此。
If you need the columns to be 400px wide always, you won't be able to get them side by side in most screen widths. So you should consider how responsive you wish to be.
如果您需要列的宽度始终为 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.
默认的 Bootstrap 网格系统使用 12 列，形成一个 940 像素宽的容器，而没有启用响应功能。添加响应式 CSS 文件后，网格会根据您的视口调整为 724 像素和 1170 像素宽。在 767px 视口以下，列变得流动并垂直堆叠。
When the columns stack, you can set max-width:400pxso they stay only that wide.
当列堆叠时，您可以设置max-width:400px它们仅保持那么宽。
