Bootstrap 4 中列之間的垂直空間為空
Bootstrap 4 引入了Flexbox,導致列與最高的列具有相同的高度。在某些情況下,這會在列之間產生不必要的空白空間。
Flexbox 對齊和空白
考慮這個:
C 列:評論(高)
------------------ --------- | || | | || | ------------------ | | ------------------ | | | || | ------------------ ---------
Flexbox 垂直對齊列,結果是:
------------------ --------- | | ------------------ | | ------------------ | | | || | ------------------- ---------
但我們希望:
漂浮解決方法
<div>
Bootstrap 3 使用了浮動,它允許列浮動並僅佔用它們需要的空間。要在 Bootstrap 4 中實現此目的:
d-lg-block 類別強制在行上顯示:區塊,允許列在大螢幕上浮動。
巢狀和訂單保留
<div>
如下所示的巢狀欄位可能看起來像解決方案:
但是,這會損害列順序。在上面的範例中,由於巢狀行的自動佈局,側邊欄將在小螢幕上顯示在最後。以上是如何避免 Bootstrap 4 中列之間出現空白垂直空間?的詳細內容。更多資訊請關注PHP中文網其他相關文章!