在Bootstrap 4 中處理列時的一個常見問題是列之間存在空白垂直空間,尤其是在更大的視窗。發生這種情況是因為 Bootstrap 4 實作了 Flexbox 佈局,它會對齊列的高度。
在 Flexbox 佈局中,一行中的所有列的高度與最高的列的高度相同柱子。例如,如果您有三個不同高度的列,則兩個較短的列將垂直延伸以符合最高列的高度。結果,出現了空白。
由於巢狀列可能會破壞所需的列順序,因此 Bootstrap 4 中的解決方案是使用浮點。這模仿了 Bootstrap 3 的行為,其中列會彼此相鄰浮動。
要刪除空白的垂直空間,您可以使用下列 CSS:
.container { .row { display: block !important; .col { float: left; } } }
此程式碼覆寫預設的 Flexbox 版面配置並設定要封鎖的行的顯示屬性。此外,它將列的浮動屬性設為左側,允許它們彼此相鄰浮動。
這裡是一個範例HTML 結構,它使用浮動來消除空白的垂直空間:
<div class="container"> <div class="row d-lg-block"> <div class="col-lg-9 float-left description">...</div> <div class="col-lg-3 float-right sidebar">...</div> <div class="col-lg-9 float-left comments">...</div> </div> </div>
透過使用浮動,您可以防止空白的垂直空間,並即使在較大的情況下也能保持所需的列順序視口。
以上是如何消除 Bootstrap 4 中列之間的空白垂直空間?的詳細內容。更多資訊請關注PHP中文網其他相關文章!