html - Bootstrap - 如果第一列高于其他列，则最后一列布局不正确( fiddle 示例)

Question

我需要做一个很好的列布局，它会响应并且布局很好，但是有一个问题，如果第一列有更长的文本，最后一列跳到第二列，这很难解释，这里是一个示例:

http://jsfiddle.net/LmL1a549/

HTML:

<div id="block1" class="col-xs-4"><p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p></div>

<div id="block2" class="col-xs-4"><p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p></div>

<div id="block3" class="col-xs-4"><p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p></div>

<div id="block4" class="col-xs-4"><p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p></div>

绿色列应该在灰色列下方，我认为解决此问题的最佳方法是以某种方式使所有列的高度相同，但我不能使用固定高度，因为它必须是响应式的。感谢您的回答!

Answer 1

Bootstrap 每行有 12 列。您的第四列将始终在下一行中，默认情况下它将在最短的列下方，这就是为什么它不在您的第一列下方而是在第二列下方。

而是将您的 column div 包装在 row div 中，如果您想避免这种行为，请确保每行包含不超过 12 列的任何大小。你应该看看 docs有关如何使用网格布局的更多示例

更正 fiddle