Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Membetulkan Salah Jajaran Mendatar dalam Susun Atur Grid Bendalir Bootstrap 3 dengan Ketinggian Lajur Tidak Sama?
Dalam Bootstrap 3, pengguna boleh menghadapi masalah di mana kotak dalam susun atur grid bendalir gagal dijajarkan secara mendatar apabila ia mempamerkan ketinggian yang berbeza-beza . Penyimpangan ini berlaku khususnya apabila kotak lebih tinggi daripada kotak dalam grid.
Punca utama isu ini terletak pada perbezaan ketinggian antara lajur. Untuk membetulkannya dengan berkesan, tiga pendekatan utama boleh dipertimbangkan:
1. Kaedah CSS Sahaja (Lebar Lajur CSS3)
Pendekatan ini menggunakan lebar lajur CSS3 untuk mengagihkan kandungan secara sama rata merentas lajur:
[Cutian Kod daripada bootply.com/85737]
2. Kaedah 'Clearfix' (Menggunakan Tetapan Semula Responsif Bootstrap)
Kaedah ini memperkenalkan kelas clearfix untuk menetapkan semula ketinggian lajur selepas setiap bilangan lajur yang ditentukan:
[Coretan Kod daripada bootply. com/89910]
3. Integrasi Pemalam Isotop/Masonry
Pemalam ini menawarkan keupayaan pengurusan susun atur lanjutan, termasuk pelarasan ketinggian dinamik:
[Kod Coretan daripada bootply.com/61482]
Kemas Kini 2017: Flexbox Pendekatan
Pendekatan yang lebih baharu yang diperkenalkan dengan Bootstrap 4 menggunakan flexbox untuk memastikan ketinggian yang sama untuk lajur dalam satu baris:
[Coretan Kod]
Kaedah ini menghapuskan perbezaan ketinggian dengan menjadikan semua lajur dalam satu baris sama ketinggian.
Pemahaman Tambahan tentang Lajur Ketinggian Boleh Ubah dalam Bootstrap
Untuk penerokaan lanjut, rujuk sumber berikut:
Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Salah Jajaran Mendatar dalam Susun Atur Grid Bendalir Bootstrap 3 dengan Ketinggian Lajur Tidak Sama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!