如何避免 Bootstrap 4 中列之间出现空白垂直空间？

Bootstrap 4 中列之间的垂直空间为空

Bootstrap 4 引入了 Flexbox，导致列与最高的列具有相同的高度。在某些情况下，这会在列之间产生不需要的空白空间。

Flexbox 对齐和空白

考虑这个：

• A 列：描述（高）
• B 列：侧边栏（短）
• C 列：评论（高）

Flexbox 垂直对齐列，结果是：

------------------  ---------
|                  ||         |
|                  ||         |
------------------ |         |
------------------ |         |
|                  ||         |
------------------  ---------

但是我们希望：

------------------  ---------
|                  |
 ------------------  
|                  |
 ------------------ |         |
|                  ||         |
 -------------------  ---------

浮动作为解决方法

Bootstrap 3 使用了浮动，它允许列浮动并仅占用他们需要的空间。要在 Bootstrap 4 中实现此目的：

<div>

d-lg-block 类强制在行上显示：块，允许列在大屏幕上浮动。

嵌套和顺序保留

如下所示的嵌套列可能看起来是一个解决方案：

<div>

但是，这会损害列顺序。在上面的示例中，由于嵌套行的自动布局，侧边栏将在小屏幕上显示在最后。

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