danh sách theo chiều ngang cuộn các thẻ trong Bootstrap

Question

tôi đang cố gắng để tạo ra một danh sách theo chiều ngang của thẻ nơi 3 thẻ được hiển thị tại một thời điểm và những người khác là theo chiều ngang cuộn, như thế này:

này có thể được thực hiện với CSS khá dễ dàng, nhưng tôi muốn làm điều này bằng cách sử dụng Bootstrap. Bootstrap 4 ships with cards được phổ biến bởi thiết kế material design và chúng dễ sử dụng như bất kỳ thứ gì khác trong Bootstrap. Đối với ví dụ này thay vì thẻ, nó cũng có thể là div thường xuyên. Điều tôi đang vật lộn với việc tạo ra một hộp chứa các thẻ X (hoặc div) có thể cuộn được khi 3 trong số chúng được hiển thị tại một thời điểm và những người khác tràn vào bên phải và có thể cuộn được. Tôi không chắc chắn làm thế nào để sử dụng Bootstrap cung cấp cho các thẻ (hoặc divs) một chiều rộng để 3 được hiển thị tại một thời gian và những người khác nằm bên cạnh họ bên phải.

Answer 1

Bạn có thể sử dụng bootstrap-horizon

Lắp đặt

Bao gồm bootstrap-horizon.css sau bootstrap.css

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css"> 
<link rel="stylesheet" href="/bower_components/bootstrap-horizon/bootstrap-horizon.css"> 

Thêm lớp .row-horizon-.rows đòi hỏi di chuyển ngang. Để cải thiện UX, bootstrap-horizon ghi đè các lớp học .col-*-* của bootstrap để làm cho đường cơ sở có chiều rộng 90% thay vì 100% cho phép một phần nhỏ của cột cuối cùng được hiển thị.

<div class="row row-horizon"> 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
    ... 
    </div> 
</div> 

Ví dụ

Answer 2

Bây giờ Bootstrap 4 Alpha 6 sử dụng flexbox, bố trí cuộn ngang này là dễ dàng hơn nhiều. Bạn chỉ có thể sử dụng flex-row và flex-nowrap:

<div class="container-fluid"> 
    <div class="row flex-row flex-nowrap"> 
     <div class="col-3"> 
      <div class="card card-block">Card</div> 
     </div> 
     <div class="col-3"> 
      <div class="card card-block">Card</div> 
     </div> 
     <div class="col-3"> 
      <div class="card card-block">Card</div> 
     </div> 
     <div class="col-3"> 
      <div class="card card-block">Card</div> 
     </div> 
     ... 
    </div> 
</div> 

https://www.codeply.com/go/GoFQqQAFhN

Update 2018 Bootstrap 4.0.0

Các phương pháp trên vẫn hoạt động, hoặc bạn có thể sử dụng utils flexbox trong container của thẻ: https://www.codeply.com/go/PF4APyGj7F