如何消除 Bootstrap 4 中列之间的空白垂直空间？

处理 Bootstrap 4 中列之间的空白垂直空间

在 Bootstrap 4 中处理列时的一个常见问题是列之间存在空白垂直空间，尤其是在更大的视口。发生这种情况是因为 Bootstrap 4 实现了 Flexbox 布局，它会对齐列的高度。

理解行为

在 Flexbox 布局中，一行中的所有列的高度与最高的列的高度相同柱子。例如，如果您有三个不同高度的列，则两个较短的列将垂直延伸以匹配最高列的高度。结果，出现了空白。

解决方案：使用浮点

由于嵌套列可能会破坏所需的列顺序，因此 Bootstrap 4 中的解决方案是使用浮点。这模仿了 Bootstrap 3 的行为，其中列会彼此相邻浮动。

要删除空白的垂直空间，您可以使用以下 CSS：

此代码覆盖默认的 Flexbox 布局并设置要阻止的行的显示属性。此外，它将列的浮动属性设置为左侧，允许它们彼此相邻浮动。

示例实现

这里是一个示例 HTML 结构，它使用浮动来消除空白的垂直空间:

通过使用浮动，您可以防止出现空白的垂直空间，并即使在较大的视口中也能保持所需的列顺序。

以上是如何消除 Bootstrap 4 中列之间的空白垂直空间？的详细内容。更多信息请关注PHP中文网其他相关文章！