為什麼我的 Bootstrap 4 欄位是垂直對齊而不是水平對齊？

Bootstrap 4 列對齊不一致

在從Bootstrap 3 到4 的過渡中，您注意到您的列是垂直對齊的，而不是垂直對齊的水平地。這可以歸因於 Bootstrap 4 中網格系統的變更。

Col-12 Issue

在 Bootstrap 3 中，您可以使用以下方法將列包裝在父行中「col-12」類別。這在 Bootstrap 4 中不再有效。每一層巢狀都有自己的行，因此從父行中刪除“col-12”類：

<div class="row">
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
</div>

這將確保列水平對齊並保持他們預期的行為。有關 Bootstrap 中嵌套的更多信息，請參閱其官方文件：https://getbootstrap.com/docs/4.0/layout/grid/#nesting

以上是為什麼我的 Bootstrap 4 欄位是垂直對齊而不是水平對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！