如何避免 Bootstrap 4 中列之間出現空白垂直空間？

Bootstrap 4 中列之間的垂直空間為空

Bootstrap 4 引入了Flexbox，導致列與最高的列具有相同的高度。在某些情況下，這會在列之間產生不必要的空白空間。

Flexbox 對齊和空白

考慮這個：

• A 欄位：描述（高）
• A 欄位：描述（高）
• B 列：側邊欄（短）

C 列：評論（高）

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

Flexbox 垂直對齊列，結果是：

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

但我們希望：

漂浮解決方法

<div>

Bootstrap 3 使用了浮動，它允許列浮動並僅佔用它們需要的空間。要在 Bootstrap 4 中實現此目的：

d-lg-block 類別強制在行上顯示：區塊，允許列在大螢幕上浮動。

巢狀和訂單保留

<div>

如下所示的巢狀欄位可能看起來像解決方案：

但是，這會損害列順序。在上面的範例中，由於巢狀行的自動佈局，側邊欄將在小螢幕上顯示在最後。

以上是如何避免 Bootstrap 4 中列之間出現空白垂直空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！