Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Membetulkan Jurang dalam Bootstrap Stacked Rows?
Bagaimana untuk Membetulkan Jurang dalam Bootstrap Stacked Rows?
- Barbara Streisandasal
- 2024-11-06 06:17:021080semak imbas
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!