Bootstrap 4 cột bảng thẻ tế bào đáp ứng dựa trên chế độ xem?

Question

Vì vậy, trong Bootstrap v4, tôi thấy có một tính năng mới cho các ngăn bài (http://v4-alpha.getbootstrap.com/components/card/#decks) tạo thành một nhóm thẻ, với chiều cao bằng nhau theo nội dung cao nhất trong nhóm.

Dường như số cột dựa trên số lượng thẻ-div trong nhóm. Có cách nào để làm cho số lượng cột thay đổi dựa trên chế độ xem không? Ví dụ: 4 cột/thẻ rộng ở chiều rộng lớn, 2 rộng ở chiều rộng trung bình và 1 ở chiều rộng nhỏ?

Hiện tại, chúng vẫn giữ cùng số cột/thẻ cho đến khi nhỏ hơn 544px. Tại 544px trở lên, chúng có display: table-cell với quy tắc screen (min-width: 544px).

Có cách nào để làm cho thẻ có số cột khác nhau dựa trên chế độ xem bằng cách chỉ thay đổi CSS không?

Edit - Nhìn không sử dụng flex/flexbox do hỗ trợ IE

Codepen ví dụ về 4 col/thẻ rộng và 3 col/thẻ rộng tại http://codepen.io/jpost-vlocity/full/PNEKKy/

Answer 1

Ở đây bạn đi, http://codepen.io/KarlDoyle/pen/pypWbR

Điều chính là bạn phải ghi đè kiểu. như hình dưới đây.

.card-deck { 
    display: flex; 
    justify-content: flex-start; 
    flex-flow: row wrap; 
    align-items: stretch; 
} 
.card-deck .card { 
    display: block; 
    flex-basis: 33.3%; /* change this value for each breakpoint*/ 
} 

Answer 2

Update 2018

Thật khó để thiết lập các thẻ rộng (đáp ứng) với card-deck vì nó sử dụng display:table-cell và width:1%.

Tôi thấy dễ dàng hơn để làm cho chúng đáp ứng bằng cách sử dụng các thẻ bên trong lưới Bootstap col-* và sau đó bạn có thể sử dụng các điểm ngắt khung nhìn lưới. Bật flexbox của Bootstrap nếu bạn muốn các thẻ có chiều cao bằng nhau như card-deck.

http://www.codeply.com/go/6eqGPn3Qud

Ngoài ra, img-responsive đã thay đổi để img-fluid

Bootstrap 4.0.0

Flexbox bây giờ là mặc định, nhưng vẫn có không phải là một hỗ trợ cách để làm thẻ đáp ứng -deck. Cách khuyến cáo là sử dụng card bên trong lưới:

Responsive cards using grid

Một cách khác để tạo ra một phản ứng nhanh thẻ boong, đang sử dụng divs reset đáp ứng mỗi x cột. Điều này sẽ buộc thẻ để quấn tại các điểm ngắt cụ thể. Ví dụ: 5 trên xl, 4 trên lg, 3 trên md, 2 trên sm, v.v.

Responsive card deck demo (4.0.0)
Responsive card deck demo (alpha 6)
CSS pseudo elements variation

Answer 3

Điều này có thể được thực hiện với javascript.

• Trước tiên, bạn cần tạo div cho mỗi điểm ngắt trong tài liệu html của mình.

• Sau đó, bạn cần gán các giá trị div mặc định bằng css. Tạo truy vấn phương tiện cho từng điểm ngắt ghi đè giá trị mặc định đó

• Sau đó, viết một số javascript. Một hàm để kiểm tra các điểm ngắt bằng cách kiểm tra xem giá trị css mặc định bạn đã gán có bị ghi đè hay không và một giá trị khác để thêm và loại bỏ các lớp thích hợp. Tôi đã xóa các lớp học card-deck-wrapper và card-deck khi tôi muốn làm cho chúng phản hồi và thêm các lớp học col-**-** thích hợp. Cuối cùng, thêm cuộc gọi vào các hàm này trong các khu vực document.ready và window.resize.

var breakpoint; 
 

 
$(document).on('ready', function() { 
 
\t detectBreakpoint(); 
 
}); 
 

 
$(window).resize(function() { 
 
\t detectBreakpoint(); 
 
}); 
 

 
// detects the current breakpoint 
 
function detectBreakpoint() { 
 
\t if ($('.breakpointXS').css('display') == "inline") { 
 
\t \t breakpoint = 'xs'; 
 
\t } else if ($('.breakpointSM').css('display') == "inline") { 
 
\t \t breakpoint = 'sm'; 
 
\t } else if ($('.breakpointMD').css('display') == "inline") { 
 
\t \t breakpoint = 'md'; 
 
\t } else if ($('.breakpointLG').css('display') == "inline") { 
 
\t \t breakpoint = 'lg'; 
 
\t } 
 
\t placeCards(); 
 
} 
 

 
function placeCards() { 
 
\t if (breakpoint == 'xs' || breakpoint == 'sm') { 
 
\t \t console.log('small'); 
 
\t \t $('.cardCont1').removeClass('card-deck-wrapper'); 
 
\t \t $('.cardCont2').removeClass('card-deck'); 
 
\t \t $('.card').addClass('col-xs-10 offset-xs-1'); 
 
\t } else { 
 
\t \t $('.cardCont1').addClass('card-deck-wrapper'); 
 
\t \t $('.cardCont2').addClass('card-deck'); 
 
\t \t $('.card').removeClass('col-xs-10 offset-xs-1'); \t 
 
\t } 
 
}

.breakpointXS, .breakpointSM, .breakpointMD, .breakpointLG { 
 
\t /* hides divs to detect breakpoints until made visible my media queries */ 
 
\t display: none; 
 
} 
 

 
@media only screen and (max-width: 767px) { 
 
\t .breakpointXS { 
 
\t \t display: inline; 
 
\t } 
 
} 
 

 
@media screen and (max-width: 991px) and (min-width: 768px) { 
 
\t .breakpointSM { 
 
\t \t display: inline; 
 
\t } 
 
} 
 

 
@media screen and (max-width: 1199px) and (min-width: 992px) { 
 
\t .breakpointMD { 
 
\t \t display: inline; 
 
\t } 
 
} 
 

 
@media only screen and (min-width: 1200px) { 
 
\t .breakpointLG { 
 
\t \t display: inline; 
 
\t } 
 
}

<!-- to use breakpoints in jquery --> 
 
\t \t <div class="breakpointXS"></div> 
 
\t \t <div class="breakpointSM"></div> 
 
\t \t <div class="breakpointMD"></div> 
 
\t \t <div class="breakpointLG"></div>