引导3至引导4列不再水平对齐 [英] bootstrap 3 to bootstrap 4 cols no longer horizontally aligned

问题描述

我正在迁移到引导程序4，但是我已经将我的页面的boostrap-min.css从3换成了4，据我所知列的正确性，我的列现在都垂直对齐了.

im migrating to bootstrap 4 however Ive swapped the boostrap-min.css for my pages from 3 to 4 and my columns are all now vertically aligned as as far as I can see the columns are correct.

我还使用了JS小提琴来进行测试，并且能够将它们全部垂直复制.任何人都可以从我阅读文档 https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match 这应该有效

I also used a JS fiddle to test and am able to repliate them all being vertical there too. can anyone point me in the right direction, from how ive read the documentation https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match this should work

<div class="row">
    <div class="col-12">
        <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>
</div>

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

推荐答案

删除col-12，因为Bootstrap 4需要使用新的row来嵌套列.

Remove the col-12 as Bootstrap 4 requires a new row for columns to be nested.

https://getbootstrap.com/docs/4.0/layout/grid/#nesting

这篇关于引导3至引导4列不再水平对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！