Bootstrap 4 thứ tự Các cột dạng cột giống như mặt cắt ngang thay vì dọc

Question

Có thể đặt hàng Thẻ Bootstrap 4 từ trái sang phải khi gói trong .card-columns?

Trên xuống dưới (mặc định):

1 3 5 
2 4 6 

Từ trái sang phải:

1 2 3 
4 5 6 

Bởi vì chiều cao khác nhau nó là cần thiết cho tôi để sử dụng một lưới Masonry-như thế nào.

Answer 1

Thứ tự của các cột CSS là trên xuống dưới, sau đó trái sang phải do đó thứ tự của các cột trả lại sẽ được ..

1 3 5 
2 4 6 

Không có cách nào để thay đổi thứ tự của cột CSS. Bạn nên sử dụng một giải pháp khác như Masonry. https://github.com/twbs/bootstrap/issues/17882

Đồng thời, bật flexbox won't help vì Bootstrap card-deck sử dụng cột CSS (không phải flexbox) cho hiệu ứng xây. tuy nhiên bạn có thể sử dụng flexbox card-deck và cho thẻ chiều cao bằng nhau: http://www.codeply.com/go/YFFFWHVoRB

Một lựa chọn khác là sử dụng grid along with flexbox thay vì card-deck:

Bạn có thể dùng mới d-flex lớp để eliminate the extra CSS:

<div class="col-sm-4 d-flex pb-3"> 
    <div class="card card-block"> 
     Card. I'm just a simple card-block. 
    </div> 
</div> 

Related: How do I make card-columns order horizontally?