Bagaimana untuk Membetulkan Isu Penjajaran Mendatar dalam Grid Bendalir Bootstrap 3?

Masalah Susun Atur dalam Grid Bendalir Bootstrap 3

Apabila cuba mencipta reka letak grid bendalir menggunakan Bootstrap 3, pengguna mungkin menghadapi masalah penjajaran, di mana kotak dalam grid tidak dijajarkan secara mendatar apabila satu kotak melebihi ketinggian yang lain. Penyelewengan ini berlaku disebabkan oleh ketinggian kandungan yang berbeza-beza dalam lajur.

Untuk menyelesaikan dilema ini, tiga pendekatan utama berdaya maju:

1. Penyelesaian CSS Sahaja melalui Lebar Lajur CSS3

2. Pendekatan Clearfix

3. Plugin Isotop/Masonry

Kemas kini untuk 2017 dan Seterusnya

Flexbox (Bootstrap 4 dan Kemudian)

Penyelesaian kontemporari kepada isu percanggahan ketinggian ialah memaksa lajur mempunyai ketinggian yang sama menggunakan flexbox, yang terdapat dalam Bootstrap 4 secara lalai.

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

Sumber Tambahan

Lawati pautan yang disediakan untuk demonstrasi langsung penyelesaian dan selanjutnya penerokaan topik ini.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Isu Penjajaran Mendatar dalam Grid Bendalir Bootstrap 3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!