首頁 > web前端 > css教學 > 如何避免 Bootstrap 4 中列之間出現空白垂直空間?

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

Susan Sarandon
發布: 2024-11-14 13:06:02
原創
170 人瀏覽過

How to Avoid Empty Vertical Space Between Columns in 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板