首页 >web前端 >css教程 >如何消除 Bootstrap 4 中列之间的空白垂直空间?

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

Susan Sarandon
Susan Sarandon原创
2024-11-10 17:50:02911浏览

How to Eliminate Empty Vertical Space Between Columns in Bootstrap 4?

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

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

理解行为

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

解决方案:使用浮点

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

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

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

示例实现

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

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

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn