首页 >web前端 >css教程 >为什么从 Bootstrap 3 升级后,我的列在 Bootstrap 4 中垂直对齐?

为什么从 Bootstrap 3 升级后,我的列在 Bootstrap 4 中垂直对齐?

Susan Sarandon
Susan Sarandon原创
2024-11-13 00:01:02821浏览

Why Are My Columns Vertically Aligned in Bootstrap 4 After Upgrading From Bootstrap 3?

Bootstrap 3 到 Bootstrap 4:垂直对齐列

从 Bootstrap 3 升级到 Bootstrap 4 时,某些用户可能会遇到问题:列垂直对齐而不是

原因:

Bootstrap 4 需要为嵌套列创建一个新行。不再需要跨越整行的旧 col-12 类。

解决方案:

要解决此问题,请删除 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>

查看此更新的 JS Fiddle 中的差异:

https:// jsfiddle.net/aq9Laaew/4792/

通过删除col-12 类,列现在将按预期水平对齐。

以上是为什么从 Bootstrap 3 升级后,我的列在 Bootstrap 4 中垂直对齐?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn