Hàng Bootstrap với các cột có chiều cao khác nhau

Tôi hiện có một cái gì đó như:

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

Bây giờ giả sử rằng, contentlà các hộp có chiều cao khác nhau, với tất cả cùng chiều rộng - làm thế nào tôi có thể giữ cùng một "bố cục dựa trên lưới" nhưng lại có tất cả các hộp thẳng hàng dưới nhau, thay vì theo đường thẳng hoàn hảo.

Hiện tại TWBS sẽ đặt dòng tiếp theo col-md-4dưới phần tử dài nhất trong hàng thứ ba trước đó., Do đó mỗi hàng của mục được căn chỉnh một cách hoàn hảo - trong khi điều này thật tuyệt, tôi muốn mỗi mục nằm ngay dưới phần tử cuối cùng (bố cục "Masonry" )

Đây là một câu hỏi phổ biến về Bootstrap, vì vậy tôi đã cập nhật và mở rộng câu trả lời cho Bootstrap 3 và Bootstrap 4 ...

Các Bootstrap 3 " chiều cao vấn đề " xảy ra bởi vì các cột sử dụng float:left. Khi một cột được "thả nổi", nó sẽ được đưa ra khỏi dòng bình thường của tài liệu. Nó được chuyển sang trái hoặc phải cho đến khi nó chạm vào cạnh của hộp chứa nó. Vì vậy, khi bạn có chiều cao cột không đồng đều , hành vi đúng là xếp chúng về phía gần nhất.

Lưu ý : Các tùy chọn dưới đây được áp dụng cho cột gói kịch bản nơi có hơn 12 đơn vị col trong một single.row . Đối với những độc giả không hiểu tại sao lại có nhiều hơn 12 cols liên tiếp hoặc nghĩ rằng giải pháp là "sử dụng các hàng riêng biệt" thì nên đọc phần này trước

Có một số cách để khắc phục điều này .. (cập nhật cho năm 2018)

1 - Cách tiếp cận 'clearfix' ( được Bootstrap khuyến nghị ) như thế này (yêu cầu lặp lại mỗi X cột). Điều này sẽ buộc bao bọc mọi X số cột ...

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

Bản trình diễn Clearfix (một cấp)

Clearfix Demo (các tầng đáp ứng) - ví dụ:col-sm-6 col-md-4 col-lg-3

Ngoài ra còn có một biến thể chỉ CSS của clearfix chỉ CSS 'clearfix'
với các bảng

Vì vấn đề là do sự khác biệt về chiều cao, bạn có thể tạo các cột có chiều cao bằng nhau trên mỗi hàng. Flexbox là cách tốt nhất để làm điều này và được hỗ trợ nguyên bản trong Bootstrap 4 ...

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

Bản trình diễn chiều cao bằng nhau của Flexbox

Một lần nữa, vấn đề chiều cao chỉ xảy ra do các cột được thả nổi. Một tùy chọn khác là đặt các cột thành display:inline-blockvà float:none. Điều này cũng mang lại sự linh hoạt hơn cho việc căn chỉnh theo chiều dọc. Tuy nhiên, với giải pháp này, không được có khoảng trắng HTML giữa các cột , nếu không các phần tử khối nội tuyến có thêm không gian và sẽ bao bọc sớm.

Bản trình diễn sửa lỗi khối nội tuyến

4 - Phương pháp tiếp cận cột CSS3 (Masonry / Pinterest như giải pháp) ..

Đây không phải là bản gốc của Bootstrap 3, mà là một cách tiếp cận khác sử dụng CSS nhiều cột . Một nhược điểm của phương pháp này là thứ tự cột là từ trên xuống dưới thay vì từ trái sang phải. Bootstrap 4 bao gồm loại giải pháp này : Bootstrap 4 Masonry card Demo .

Bản trình diễn Bootstrap 3 nhiều cột

5 - Cách tiếp cận JavaScript / jQuery Masonry

Cuối cùng, bạn có thể muốn sử dụng một plugin như Isotope / Masonry:

Bootstrap Masonry Demo
Masonry Demo 2

Thông tin thêm về Cột chiều cao có thể thay đổi Bootstrap

Cập nhật 2018
Tất cả các cột có chiều cao bằng nhau trong Bootstrap 4 vì nó sử dụng flexbox theo mặc định, do đó "vấn đề chiều cao" không phải là vấn đề. Ngoài ra, Bootstrap 4 còn bao gồm loại giải pháp đa cột này: Bản trình diễn thẻ Bootstrap 4 Masonry .

Vì một số lý do, điều này đã hoạt động đối với tôi mà không có lớp .display-flex

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

Tôi đã tạo một tiện ích mở rộng khác (cũng có khả năng phản ứng) cho hàng bootstrap. Bạn có thể thử một cái gì đó như sau:

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