แถว Bootstrap ที่มีคอลัมน์ที่มีความสูงต่างกัน

ขณะนี้ฉันมีสิ่งที่ต้องการ:

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

ตอนนี้สมมติว่าcontentเป็นกล่องที่มีความสูงต่างกันโดยมีความกว้างเท่ากันทั้งหมด - ฉันจะรักษา "เค้าโครงตามตาราง" เดียวกันได้อย่างไรและยังมีกล่องทั้งหมดเรียงกันอยู่ใต้กันและกันแทนที่จะเป็นเส้นที่สมบูรณ์แบบ

ปัจจุบัน TWBS จะวางบรรทัดถัดไปของcol-md-4องค์ประกอบที่ยาวที่สุดในแถวที่สามก่อนหน้าดังนั้นแต่ละแถวของรายการจึงถูกจัดวางอย่างสมบูรณ์แบบในขณะที่สิ่งนี้ยอดเยี่ยมฉันต้องการให้แต่ละรายการอยู่ภายใต้องค์ประกอบสุดท้ายโดยตรง (เลย์เอาต์ "ก่ออิฐ" )

นี่เป็นคำถาม Bootstrap ยอดนิยมดังนั้นฉันจึงอัปเดตและขยายคำตอบสำหรับ Bootstrap 3 และ Bootstrap 4 ...

Bootstrap 3 " ปัญหาความสูง " float:leftเกิดขึ้นเนื่องจากคอลัมน์ที่ใช้ เมื่อคอลัมน์ถูก "ลอย" จะถูกนำออกจากโฟลว์ปกติของเอกสาร เลื่อนไปทางซ้ายหรือขวาจนกว่าจะแตะขอบของกล่องบรรจุ ดังนั้นเมื่อคุณมีความสูงของคอลัมน์ไม่เท่ากันพฤติกรรมที่ถูกต้องคือการวางซ้อนกันให้ชิดที่สุด

หมายเหตุ : ตัวเลือกด้านล่างนี้มีผลบังคับใช้สำหรับห่อคอลัมน์สถานการณ์ที่มีมากกว่า 12 .rowหน่วยเทือกเขาในครั้งเดียว สำหรับผู้อ่านที่ไม่เข้าใจว่าทำไมต้องมีมากกว่า 12 คอลัมน์ติดต่อกันหรือคิดว่าวิธีแก้ปัญหาคือ "ใช้แถวแยก" ควรอ่านสิ่งนี้ก่อน

มีสองสามวิธีในการแก้ไข .. (อัพเดทปี 2018)

1 - แนวทาง 'clearfix' ( แนะนำโดย Bootstrap ) เช่นนี้ (ต้องมีการทำซ้ำทุกคอลัมน์X ) สิ่งนี้จะบังคับให้มีการตัดทุกXจำนวนคอลัมน์ ...

<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 (ระดับเดียว)

Clearfix Demo (ระดับที่ตอบสนอง) - เช่นcol-sm-6 col-md-4 col-lg-3

นอกจากนี้ยังมีรูปแบบเฉพาะ CSSของการล้างเฉพาะ CSS 'clearfix' ที่
มีตารางเท่านั้น

เนื่องจากปัญหาเกิดจากความสูงที่แตกต่างกันคุณจึงทำให้คอลัมน์มีความสูงเท่ากันในแต่ละแถวได้ Flexbox เป็นวิธีที่ดีที่สุดในการดำเนินการนี้และได้รับการสนับสนุนใน Bootstrap 4 ...

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

Flexbox ความสูงเท่ากันสาธิต

อีกครั้งปัญหาความสูงเกิดขึ้นเนื่องจากคอลัมน์ลอยเท่านั้น อีกตัวเลือกหนึ่งคือการตั้งคอลัมน์ไปและdisplay:inline-block float:noneนอกจากนี้ยังให้ความยืดหยุ่นมากขึ้นสำหรับการจัดแนวตั้ง อย่างไรก็ตามด้วยโซลูชันนี้จะต้องไม่มีช่องว่าง HTML ระหว่างคอลัมน์มิฉะนั้นองค์ประกอบแบบอินไลน์จะมีช่องว่างเพิ่มเติมและจะถูกตัดออกก่อนเวลาอันควร

การสาธิตการแก้ไขบล็อกแบบอินไลน์

4 - แนวทางคอลัมน์ CSS3 (การก่ออิฐ / Pinterest เช่นโซลูชัน) ..

นี้ไม่ได้เป็นพื้นเมือง Bootstrap 3 แต่วิธีการอื่นโดยใช้CSS หลายคอลัมน์ ข้อเสียอย่างหนึ่งของแนวทางนี้คือลำดับคอลัมน์คือจากบนลงล่างแทนที่จะเป็นซ้ายไปขวา Bootstrap 4 รวมถึงประเภทของการแก้ปัญหานี้ : Bootstrap 4 ปูนบัตรสาธิต

Bootstrap 3 หลายคอลัมน์สาธิต

5 - วิธีการก่ออิฐ JavaScript / jQuery

สุดท้ายคุณอาจต้องการใช้ปลั๊กอินเช่น Isotope / Masonry:

Bootstrap Masonry Demo
Masonry Demo 2

ข้อมูลเพิ่มเติมเกี่ยวกับคอลัมน์ความสูงตัวแปร Bootstrap

อัปเดต 2018
คอลัมน์ทั้งหมดมีความสูงเท่ากันในBootstrap 4เนื่องจากใช้ flexbox โดยค่าเริ่มต้นดังนั้น "ปัญหาความสูง" จึงไม่ใช่ปัญหา นอกจากนี้เงินทุนรวมถึง 4 ประเภทของการแก้ปัญหาหลายคอลัมน์นี้: บัตร Bootstrap 4 ปูนสาธิต

ด้วยเหตุผลบางประการสิ่งนี้ใช้ได้ผลกับฉันโดยไม่มีคลาส. display-flex

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

ฉันสร้างส่วนขยายอื่น (ซึ่งเป็นปฏิกิริยาเช่นกัน) ให้กับแถว bootstrap คุณสามารถลองสิ่งนี้:

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