为什么我的 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 id="TEST">TEST</h1>
    </div>
    <div class="col-md-2">
        <h1 id="TEST">TEST</h1>
    </div>
    <div class="col-md-2">
        <h1 id="TEST">TEST</h1>
    </div>
    <div class="col-md-2">
        <h1 id="TEST">TEST</h1>
    </div>
</div>

这将确保列水平对齐并保持他们预期的行为。有关 Bootstrap 中嵌套的更多信息，请参阅其官方文档：https://getbootstrap.com/docs/4.0/layout/grid/#nesting

以上是为什么我的 Bootstrap 4 列是垂直对齐而不是水平对齐？的详细内容。更多信息请关注PHP中文网其他相关文章！