Farklı yükseklikteki sütunlara sahip önyükleme satırı

Şu anda şöyle bir şeye sahibim:

<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>

Şimdi varsayalım ki, contenthepsi aynı genişliğe sahip farklı yükseklikteki kutulardı - aynı "ızgara tabanlı düzeni" nasıl koruyabilirim ve yine de tüm kutuları mükemmel çizgiler yerine birbirinin altında sıralayabilirim.

Şu anda TWBS col-md-4, önceki üçüncü satırdaki en uzun öğenin bir sonraki satırını yerleştirecektir. Bu nedenle, her öğe satırı kusursuz bir şekilde hizalanır - bu harika olsa da, her öğenin doğrudan son öğenin ("Duvarcılık" düzeni) altına düşmesini istiyorum. )

Bu popüler bir Bootstrap sorusudur, bu yüzden Bootstrap 3 ve Bootstrap 4'ün cevabını güncelledim ve genişlettim ...

Bootstrap 3 " yükseklik sorunu sütunları kullandığından" oluşur float:left. Bir sütun "yüzdürüldüğünde", belgenin normal akışından çıkarılır. İçerdiği kutunun kenarına değene kadar sola veya sağa kaydırılır. Dolayısıyla, eşit olmayan sütun yükseklikleriniz olduğunda, doğru davranış, onları en yakın tarafa istiflemektir.

Not : Aşağıdaki seçenekler için geçerlidir kolon sarma senaryoları vardır , tek fazla 12 sütun birimleri.row . Neden arka arkaya 12'den fazla sütun olacağını anlamayan veya çözümün "ayrı satırlar kullanmak" olduğunu düşünen okuyucular için önce bunu okumalısınız

Bunu düzeltmenin birkaç yolu var .. (2018 için güncellendi)

1 - Bunun gibi 'clearfix' yaklaşımı ( Bootstrap tarafından önerilir ) (her X sütununda yineleme gerektirir ). Bu, her X sayıda sütunu kaydırmaya zorlar ...

<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>

Clearfix Demo (tek katmanlı)

Clearfix Demo (duyarlı katmanlar) - ör.col-sm-6 col-md-4 col-lg-3

Tablolarla birlikte 'temizle' yalnızca CSS temizlemesinin yalnızca CSS varyasyonu da vardır

Sorunun nedeni yükseklik farkı olduğundan , sütunları her satırda eşit yükseklikte yapabilirsiniz . Flexbox, bunu yapmanın en iyi yoludur ve Bootstrap 4'te yerel olarak desteklenir ...

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

Flexbox eşit yükseklikte Demo

Yine, yükseklik sorunu yalnızca sütunlar yüzer olduğu için ortaya çıkar. Diğer bir seçenek de sütunları display:inline-blockve olarak ayarlamaktır float:none. Bu aynı zamanda dikey hizalama için daha fazla esneklik sağlar. Bununla birlikte, bu çözümde , sütunlar arasında HTML boşlukları olmamalıdır , aksi takdirde satır içi blok elemanlarının ek boşluğu olur ve zamanından önce sarılır.

Satır içi blok düzeltme demosu

4 - CSS3 sütunları yaklaşımı (Duvarcılık / Pinterest benzeri çözüm) ..

Bu, Bootstrap 3'e özgü değil, CSS çoklu sütunlarını kullanan başka bir yaklaşımdır . Bu yaklaşımın bir dezavantajı, sütun sırasının soldan sağa yerine yukarıdan aşağıya olmasıdır. Bootstrap 4 bu tür bir çözümü içerir : Bootstrap 4 Masonry Cards Demo .

Bootstrap 3 çok sütunlu Demo

5 - Duvarcılık JavaScript / jQuery yaklaşımı

Son olarak, Isotope / Masonry gibi bir eklenti kullanmak isteyebilirsiniz:

Bootstrap Duvarcılık Demosu
Duvarcılık Demosu 2

Bootstrap Değişken Yükseklik Sütunları hakkında daha fazla bilgi

2018 Güncellemesi Bootstrap 4'te
tüm sütunlar eşit yüksekliktedir çünkü varsayılan olarak flexbox kullanır, bu nedenle "yükseklik sorunu" bir sorun değildir. Ek olarak, Bootstrap 4 bu tür çok sütunlu çözümü içerir: Bootstrap 4 Masonry Cards Demo .

Bazı nedenlerden dolayı bu, .display-flex sınıfı olmadan benim için çalıştı

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

Bootstrap satırına başka bir uzantı (aynı zamanda reaktif olan) oluşturdum. Bunun gibi bir şey deneyebilirsiniz:

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