Bagaimana untuk Membetulkan Kotak Tidak Sejajar dalam Susun Atur Grid Bendalir Bootstrap 3?

Menyelesaikan masalah Bootstrap 3 Isu Susun Atur Grid Bendalir

Menghadapi salah jajaran dalam susun atur grid cecair Bootstrap 3? Kotak yang gagal dijajarkan dalam satu baris boleh menjadi isu yang mengecewakan. Punca utama terletak pada ketinggian kandungan kotak yang berbeza-beza. Berikut adalah kaedah yang berkesan untuk menyelesaikan masalah ini:

1. Pendekatan CSS (Lebar Lajur CSS3)

Laksanakan pendekatan berikut menggunakan lebar lajur CSS3: [Bootply Demo](http://bootply.com/85737)

2 . Pendekatan 'Clearfix' (Tetapan Semula Responsif)

Gunakan pendekatan 'clearfix' seperti yang disyorkan oleh Bootstrap: [Bootply Demo](http://bootply.com/89910)

3. Pemalam Isotope/Masonry

Untuk penyelesaian alternatif, pertimbangkan untuk menggunakan pemalam Isotope/Masonry: [Bootply Demo](http://bootply.com/61482)

Kemas kini 2017: Penyelesaian Flexbox

Dalam Bootstrap 4, flexbox menawarkan penyelesaian optimum:

CSS:

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Demo: [Flexbox Equal Height](https://codepen.io/anon/pen/EbpvGe)

Sumber Tambahan untuk Ketinggian Boleh Ubah Bootstrap Lajur:

• [Lajur Ketinggian Boleh Ubah Bootstrap](https://getbootstrap.com/docs/4.0/layout/grid/#equal-width)

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Kotak Tidak Sejajar dalam Susun Atur Grid Bendalir Bootstrap 3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!