Baris bootstrap dengan kolom dengan ketinggian berbeda

Saat ini saya memiliki sesuatu seperti:

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

Sekarang asumsikan bahwa, contentadalah kotak dengan tinggi yang berbeda, dengan semua lebar yang sama - bagaimana saya bisa menjaga "tata letak berbasis grid" yang sama namun memiliki semua kotak berbaris di bawah satu sama lain, bukan dalam garis yang sempurna.

Saat ini TWBS akan menempatkan baris berikutnya di col-md-4bawah elemen terpanjang di baris ketiga sebelumnya., Sehingga setiap baris item sejajar sempurna dan bersih - sementara ini keren, saya ingin setiap item berada tepat di bawah elemen terakhir (tata letak "Masonry" )

Ini adalah pertanyaan Bootstrap yang populer, jadi saya telah memperbarui dan memperluas jawaban untuk Bootstrap 3 dan Bootstrap 4 ...

The Bootstrap 3 " height masalah " terjadi karena kolom menggunakan float:left. Saat kolom "mengambang", itu diambil dari aliran normal dokumen. Digeser ke kiri atau ke kanan hingga menyentuh tepi kotak penampungnya. Jadi, bila Anda memiliki tinggi kolom yang tidak rata , perilaku yang benar adalah menumpuknya ke sisi terdekat.

Catatan : Opsi di bawah ini berlaku untuk skenario pembungkusan kolom di mana ada lebih dari 12 unit kolom dalam satu.row . Untuk pembaca yang tidak mengerti mengapa akan ada lebih dari 12 kolom dalam satu baris , atau berpikir solusinya adalah dengan "menggunakan baris terpisah" harus membaca ini terlebih dahulu

Ada beberapa cara untuk memperbaikinya .. (diperbarui untuk 2018)

1 - Pendekatan 'clearfix' ( direkomendasikan oleh Bootstrap ) seperti ini (memerlukan iterasi setiap kolom X ). Ini akan memaksa membungkus setiap X jumlah kolom ...

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

Demo Clearfix (tingkat tunggal)

Demo Clearfix (tingkatan responsif) - mis.col-sm-6 col-md-4 col-lg-3

Ada juga variasi CSS-only dari 'clearfix'
CSS-only clearfix dengan tabel

Karena masalah ini disebabkan oleh perbedaan ketinggian, Anda dapat membuat kolom sama tingginya di setiap baris. Flexbox adalah cara terbaik untuk melakukan ini, dan secara native didukung di Bootstrap 4 ...

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

Flexbox sama tinggi Demo

Sekali lagi, masalah ketinggian hanya terjadi karena kolom diapungkan. Pilihan lainnya adalah mengatur kolom menjadi display:inline-blockdan float:none. Ini juga memberikan lebih banyak fleksibilitas untuk perataan vertikal. Namun, dengan solusi ini tidak boleh ada spasi HTML antar kolom , jika tidak elemen blok-sebaris memiliki ruang tambahan dan akan membungkus sebelum waktunya.

Demo perbaikan blok sebaris

4 - Pendekatan kolom CSS3 (solusi seperti Masonry / Pinterest) ..

Ini bukan asli Bootstrap 3, tetapi pendekatan lain yang menggunakan multikolom CSS . Satu kelemahan dari pendekatan ini adalah urutan kolom dari atas ke bawah, bukan dari kiri ke kanan. Bootstrap 4 menyertakan jenis solusi ini : Bootstrap 4 Masonry cards Demo .

Demo Bootstrap 3 multi-kolom

5 - Pendekatan Masonry JavaScript / jQuery

Terakhir, Anda mungkin ingin menggunakan plugin seperti Isotope / Masonry:

Demo Bootstrap Masonry Demo
Masonry 2

Lebih lanjut tentang Kolom Ketinggian Variabel Bootstrap

Perbarui 2018
Semua kolom memiliki tinggi yang sama di Bootstrap 4 karena menggunakan flexbox secara default, jadi "masalah ketinggian" tidak menjadi masalah. Selain itu, Bootstrap 4 menyertakan jenis solusi multi-kolom ini: Bootstrap 4 Masonry cards Demo .

Untuk beberapa alasan ini berhasil untuk saya tanpa kelas .display-flex

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

Saya membuat ekstensi lain (yang juga reaktif) ke baris bootstrap. Anda dapat mencoba sesuatu seperti ini:

.row.flexRow { display: flex; flex-wrap: wrap;}