从 Bootstrap 3 迁移到 Bootstrap 4 时如何解决垂直列对齐问题？

Bootstrap 3 到 Bootstrap 4：已解决垂直列对齐

从 Bootstrap 3 过渡到 4 时，您可能会遇到垂直对齐问题你的专栏。出现这种情况是因为 Bootstrap 4 在处理嵌套列的方式上引入了结构性变化。

要纠正此问题并恢复水平列对齐，必须删除嵌套列周围的 col-12 类。 Bootstrap 4 需要新行进行嵌套，如文档中所述：

“如果您在 Bootstrap 3 中使用了 .col-xs-*，请务必在 Bootstrap 4 中使用 .row，因为嵌套列没有行会引起问题。”

已修订代码：

<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>

此外，这可以使用 JavaScript Fiddle 进行验证：

https://jsfiddle.net/aq9Laaew/4791/

以上是从 Bootstrap 3 迁移到 Bootstrap 4 时如何解决垂直列对齐问题？的详细内容。更多信息请关注PHP中文网其他相关文章！