Rumah > Artikel > hujung hadapan web > Bagaimana untuk Membetulkan Jurang dalam Bootstrap Stacked Rows?

Bagaimana untuk Membetulkan Jurang dalam Bootstrap Stacked Rows?

Barbara Streisandasal: 2024-11-06 06:17:02989semak imbas

How to Fix Gaps in Bootstrap Stacked Rows?

Jurang dalam Baris Bertindan Bootstrap?

Apabila mencipta grid Bootstrap yang disusun daripada saiz skrin yang lebih besar kepada yang lebih kecil, adalah perkara biasa untuk menghadapi jurang apabila item dengan kandungan yang panjang mengganggu susunan susun. Berikut ialah beberapa penyelesaian untuk menangani isu ini:

1. Tetapkan Ketinggian Elemen:
Tetapkan ketinggian tetap kepada semua elemen dalam grid portfolio anda.

2. Gunakan Masonry:
Gunakan perpustakaan seperti masonry.js yang melaraskan saiz elemen secara dinamik untuk dimuatkan ke dalam ruang yang tersedia.

3. Kelas Responsif dan Clearfix:
Seperti yang diterangkan dalam dokumentasi Bootstrap di bawah "Tetapan Semula Lajur Responsif", gunakan kelas responsif dan tambahkan div dengan kelas "clearfix" mengikut setiap elemen dalam grid untuk mengelakkan jurang.

4. Pelarasan Ketinggian jQuery:
Gunakan jQuery untuk melaraskan ketinggian lajur secara dinamik berdasarkan ketinggian maksimum dalam grid.

Contoh menggunakan Kelas Responsif dan Pendekatan Clearfix:

Tambahkan kelas "jelas" pada setiap elemen dalam grid:

`<div>

<div>

Tambahkan CSS pada mengendalikan titik putus yang berbeza:

@media (max-width: 767px) {
    .portfolio>.clear:nth-child(6n)::before {
        content: '';
        display: table;
        clear: both;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .portfolio>.clear:nth-child(8n)::before {
        content: '';
        display: table;
        clear: both;
    }
}
@media (min-width: 1200px) {
    .portfolio>.clear:nth-child(12n)::before {  
        content: '';
        display: table;
        clear: both;
    }
}

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

jquery css bootstrap using class JS this column issue

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk Memastikan Medan Pilihan Dilumpuhkan Dihantar dengan Borang?Artikel seterusnya：Bagaimana untuk Memastikan Medan Pilihan Dilumpuhkan Dihantar dengan Borang?

Artikel berkaitan

Lihat lagi