Bagaimana untuk Membetulkan Isu Penjajaran Lajur Menegak Apabila Berhijrah dari Bootstrap 3 ke Bootstrap 4?

Bootstrap 3 ke Bootstrap 4: Penjajaran Lajur Menegak Selesai

Dalam peralihan daripada Bootstrap 3 ke 4, anda mungkin menghadapi masalah penjajaran menegak dalam lajur anda. Ini berlaku kerana Bootstrap 4 memperkenalkan perubahan struktur dalam cara lajur bersarang dikendalikan.

Untuk membetulkan isu ini dan memulihkan penjajaran lajur mendatar, adalah penting untuk mengalih keluar kelas kol-12 yang mengelilingi lajur bersarang anda. Bootstrap 4 memerlukan baris baharu untuk bersarang, seperti yang dijelaskan dalam dokumentasi:

"Jika anda menggunakan .col-xs-* dalam Bootstrap 3, pastikan anda menggunakan .row dalam Bootstrap 4, sebagai lajur bersarang tanpa baris akan menimbulkan masalah."

Disemak Kod:

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

Selain itu, ini boleh disahkan menggunakan JavaScript Fiddle:

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

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Isu Penjajaran Lajur Menegak Apabila Berhijrah dari Bootstrap 3 ke Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!