列之间的间距

Question

我正在做一个带bootstrap的项目，并且对列的对齐有问题。这些显然与指定列的大小并不完全一致，因此网站中的空间也是如此。

我没有找到一些方法可以让我解决这个问题。 我在下面留下一张图片。

Problem Image

Answer 1

看起来你把多行的价值列在同一<div class="row">内。如果他们都是一样的高度，那么这很有效，但你的不是。 Bootstrap通过使每个单元格float: left实现其网格系统，如果某些列比其他列高，则会产生一些时髦的结果。 Here's an example你可以看到它如何定位可变高度单元格。

相反，您可能想要执行多个单独的row s，如that same example的第二个三分之一所示。每个row将从左边缘开始，完全位于其上方的row之下，这听起来像你想要的。

或者，您可以添加一个<div class="clearfix"></div>作为从左边距重新开始的另一种方式（如该example的最后三分之一所示）。这不是那么干净，但它可以给你更多的灵活性，使你的响应式布局非常花哨。请参阅responsive column resets的文档。

我会去与多个row s，除非你真的需要响应列重置的灵活性。