Bagaimana untuk Menghapuskan Jurang dalam Bootstrap Stacked Rows?

Menyelesaikan Jurang dalam Baris Bertindan Bootstrap

Apabila membina grid Bootstrap untuk halaman portfolio, anda mungkin menghadapi isu di mana jubin yang lebih panjang menyebabkan jurang dalam reka letak semasa menyusun berlaku. Isu ini timbul kerana ketinggian elemen yang berbeza-beza dalam grid. Untuk menyelesaikan masalah ini, beberapa penyelesaian wujud:

1. Tetapkan Ketinggian untuk Semua Elemen Portfolio: Mewujudkan ketinggian tetap untuk setiap elemen portfolio memastikan susunan yang konsisten, menghapuskan jurang.
2. Gunakan Masonry untuk Pemasangan Dinamik: Masonry ialah alat susun atur yang menyusun elemen secara dinamik agar sesuai dengan ruang yang tersedia, menghapuskan jurang walaupun dengan panjang kandungan yang berbeza-beza.
3. Gunakan Kelas Responsif dan Clearfix: Seperti yang ditakrifkan dalam dokumentasi Bootstrap di bawah "Tetapan Semula Lajur Responsif," pendekatan ini melibatkan penggunaan kelas responsif dan pembetulan jelas untuk menangani isu penjajaran grid pada berbeza titik putus.
4. Gunakan jQuery untuk Melaraskan Ketinggian Lajur Secara Dinamik: jQuery boleh digunakan untuk melaraskan ketinggian lajur secara dinamik, memastikan ia sejajar dengan betul tanpa mengira panjang kandungan.

Berikut ialah teknik khusus untuk menyelesaikan masalah isu:

Tambah div clearfix selepas setiap elemen grid:

<div class="row portfolio">
    <div class="col-...">
        ...
    </div>
    <div class="clear"></div>
</div>

Gunakan pertanyaan media pada div clearfix untuk mengosongkan apungan:

@media (max-width: 767px) {
    .portfolio>.clear:nth-child(6n)::before {
        clear: both;
    }
}

Pendekatan ini menyediakan:

• Penanda boleh dibaca dan diselenggara: HTML kekal mudah, membolehkan pengurusan mudah elemen portfolio.
• Penjajaran merentas saiz skrin yang berbeza: CSS memastikan elemen diselaraskan pada semua titik putus biasa, menghapuskan jurang.

Atas ialah kandungan terperinci Bagaimana untuk Menghapuskan Jurang dalam Bootstrap Stacked Rows?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!