Thiếu hiển thị - ** và ẩn - ** trong Bootstrap v4

Trong Bootstrap v3, tôi thường sử dụng các lớp ẩn - ** kết hợp với Clearfix để kiểm soát bố cục nhiều cột ở các độ rộng màn hình khác nhau. Ví dụ,

Tôi có thể kết hợp nhiều ẩn - ** trong một DIV để làm cho nhiều cột của tôi xuất hiện chính xác ở các độ rộng màn hình khác nhau.

Ví dụ: nếu tôi muốn hiển thị các hàng ảnh sản phẩm, 4 hàng trên kích thước màn hình lớn hơn, 3 trên màn hình nhỏ hơn, sau đó 2 trên màn hình rất nhỏ. Ảnh sản phẩm có thể có độ cao khác nhau, vì vậy tôi cần có mã xóa để đảm bảo hàng được ngắt đúng cách.

Đây là một ví dụ trong v3 ...

http://jsbin.com/tosebayode/edit?html,css,output

Bây giờ v4 đã loại bỏ các lớp này và thay thế chúng bằng các lớp hiển thị / ẩn - ** - lên / xuống tôi dường như phải làm điều tương tự với nhiều DIV thay thế.

Đây là một ví dụ tương tự trong v4 ...

http://jsbin.com/sagowihowa/edit?html,css,output

Vì vậy, tôi đã đi từ các DIV đơn lẻ đến việc phải thêm nhiều DIV với nhiều lớp lên / xuống để đạt được điều tương tự.

Từ...

<div class="clearfix visible-xs-block visible-sm-block"></div>

đến...

<div class="clearfix hidden-sm-up"></div>
<div class="clearfix hidden-md-up hidden-xs-down"></div>
<div class="clearfix hidden-md-down"></div>

Có cách nào tốt hơn để làm điều này trong v4 mà tôi đã bỏ qua không?

Cập nhật cho Bootstrap 4 (2018)

Các lớp hidden-*và không còn tồn tại trong Bootstrap 4. Nếu bạn muốn ẩn một phần tử trên các tầng hoặc điểm dừng cụ thể trong Bootstrap 4, hãy sử dụng các lớp hiển thị tương ứng.visible-*d-*

Hãy nhớ rằng siêu nhỏ / di động (trước đây xs) là điểm dừng mặc định (ngụ ý), trừ khi bị ghi đè bởi điểm dừng lớn hơn . Do đó, các -xstrung tố không còn tồn tại trong Bootstrap 4 .

Hiển thị / ẩn cho điểm dừng và xuống :

• hidden-xs-down (hidden-xs) = = d-none d-sm-block
• hidden-sm-down (hidden-sm hidden-xs) = = d-none d-md-block
• hidden-md-down (hidden-md hidden-sm hidden-xs) = = d-none d-lg-block
• hidden-lg-down = = d-none d-xl-block
• hidden-xl-down(n / a 3.x) = d-none(giống như hidden)

Hiển thị / ẩn cho điểm dừng và lên :

• hidden-xs-up= d-none(giống như hidden)
• hidden-sm-up = = d-sm-none
• hidden-md-up = = d-md-none
• hidden-lg-up = = d-lg-none
• hidden-xl-up (không có 3.x) = d-xl-none

Chỉ hiển thị / ẩn cho một điểm dừng duy nhất :

• hidden-xs(chỉ) = d-none d-sm-block(giống như hidden-xs-down)
• hidden-sm (chỉ) = d-block d-sm-none d-md-block
• hidden-md (chỉ) = d-block d-md-none d-lg-block
• hidden-lg (chỉ) = d-block d-lg-none d-xl-block
• hidden-xl (không có 3.x) = d-block d-xl-none
• visible-xs (chỉ) = d-block d-sm-none
• visible-sm (chỉ) = d-none d-sm-block d-md-none
• visible-md (chỉ) = d-none d-md-block d-lg-none
• visible-lg (chỉ) = d-none d-lg-block d-xl-none
• visible-xl (không có 3.x) = d-none d-xl-block

Bản trình diễn của các lớp hiển thị đáp ứng trong Bootstrap 4

Ngoài ra, lưu ý rằng d-*-blockcó thể được thay thế bằng d-*-inline, d-*-flex, d-*-table-cell, d-*-tablevv .. tùy thuộc vào loại màn hình của nguyên tố này. Đọc thêm về các lớp hiển thị

Thật không may, tất cả các lớp hidden-*-upvà hidden-*-downđã bị xóa khỏi Bootstrap (kể từ Bootstrap Phiên bản 4 Beta , trong Phiên bản 4 Alpha và Phiên bản 3, các lớp này vẫn tồn tại).

Thay vào đó, các lớp mới d-*nên được sử dụng, như được đề cập ở đây: https://getbootstrap.com/docs/4.0/migration/#utilities

Tôi phát hiện ra rằng cách tiếp cận mới ít hữu ích hơn trong một số trường hợp. Cách tiếp cận cũ là ẨN yếu tố trong khi cách tiếp cận mới là để HIỂN THỊ yếu tố. Hiển thị các phần tử không dễ dàng với CSS vì bạn cần biết liệu phần tử đó có được hiển thị dưới dạng khối, nội tuyến, khối nội tuyến, bảng không, v.v.

Bạn có thể muốn khôi phục các kiểu "ẩn- *" trước đây được biết đến từ Bootstrap 3 bằng CSS này:

/*\
 * Restore Bootstrap 3 "hidden" utility classes.
\*/

/* Breakpoint XS */
@media (max-width: 575px)
{
    .hidden-xs-down, .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, 
    .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    }

}

/* Breakpoint SM */
@media (min-width: 576px) and (max-width: 767px)
{
    .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, 
    .hidden-unless-xs, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint MD */
@media (min-width: 768px) and (max-width: 991px)
{
    .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint LG */
@media (min-width: 992px) and (max-width: 1199px)
{
    .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint XL */
@media (min-width: 1200px)
{
    .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, .hidden-xl-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg
    {
        display: none !important;
    } 
}

Các lớp hidden-unless-*không được bao gồm trong Bootstrap 3, nhưng chúng cũng hữu ích và nên tự giải thích.

Bootstrap v4.1 sử dụng tên lớp mới để ẩn các cột trên hệ thống lưới của chúng.

Để ẩn các cột tùy thuộc vào chiều rộng màn hình, hãy sử dụng d-nonelớp hoặc bất kỳ d-{sm,md,lg,xl}-nonelớp nào. Để hiển thị các cột trên các kích thước màn hình nhất định, hãy kết hợp các lớp được đề cập ở trên với d-blockhoặc d-{sm,md,lg,xl}-blockcác lớp.

Ví dụ là:

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Nhiều trong số này ở đây .

Tôi không mong đợi rằng nhiều div là một giải pháp tốt.

Tôi cũng nghĩ rằng bạn có thể thay thế .visible-sm-blockbằng .hidden-xs-downvà .hidden-md-up(hoặc .hidden-sm-downvà.hidden-lg-up hành động trên cùng các truy vấn phương tiện).

hidden-sm-up biên dịch thành:

.visible-sm-block {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}

.hidden-sm-downvà .hidden-lg-upbiên dịch thành:

@media (max-width: 768px) {
  .hidden-xs-down {
    display: none !important;
  }
}
@media (min-width: 991px) {
  .hidden-lg-up {
    display: none !important;
  }
}

Cả hai tình huống nên hành động như nhau.

Tình hình của bạn trở nên khác biệt khi bạn cố gắng thay thế .visible-sm-blockvà .visible-lg-block. Tài liệu Bootstrap v4 cho bạn biết:

Các lớp này không cố gắng đáp ứng các trường hợp ít phổ biến hơn trong đó khả năng hiển thị của một phần tử không thể được biểu thị dưới dạng một phạm vi điểm dừng tiếp giáp duy nhất; thay vào đó bạn sẽ cần sử dụng CSS tùy chỉnh trong những trường hợp như vậy.

.visible-sm-and-lg {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-and-lg {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-sm-and-lg {
    display: block !important;
  }
}

Người dùng Klaro đề nghị khôi phục các lớp khả năng hiển thị cũ, đó là một ý tưởng tốt. Thật không may, giải pháp của họ không hoạt động trong dự án của tôi.

Tôi nghĩ rằng đó là một ý tưởng tốt hơn để khôi phục mixin cũ của bootstrap, bởi vì nó bao gồm tất cả các điểm dừng có thể được xác định bởi người dùng.

Đây là mã:

// Restore Bootstrap 3 "hidden" utility classes.
@each $bp in map-keys($grid-breakpoints) {
  .hidden-#{$bp}-up {
    @include media-breakpoint-up($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-down {
    @include media-breakpoint-down($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-only{
    @include media-breakpoint-only($bp){
      display:none !important;
    }
  }
}

Trong trường hợp của tôi, tôi đã chèn phần này vào một _custom.scsstệp được bao gồm tại thời điểm này trong bootstrap.scss:

/*!
 * Bootstrap v4.0.0-beta (https://getbootstrap.com)
 * Copyright 2011-2017 The Bootstrap Authors
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@import "functions";
@import "variables";
@import "mixins";
@import "custom"; // <-- my custom file for overwriting default vars and adding the snippet from above
@import "print";
@import "reboot";
[..]

http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

Bây giờ bạn phải xác định kích thước của những gì đang bị ẩn như vậy

.hidden-xs-down

Sẽ ẩn mọi thứ từ xs và nhỏ hơn, chỉ xs

.hidden-xs-up

Sẽ che giấu mọi thứ

Đối với bootstrap 4, đây là hình ảnh ma trận giải thích các lớp được sử dụng để hiển thị / ẩn các phần tử phụ thuộc vào kích thước màn hình:

Nguồn: Meduim: Bootstrap 4 Ẩn & Hiển thị

Bootstrap 4 để ẩn toàn bộ nội dung, hãy sử dụng lớp này '.d-none', nó sẽ ẩn mọi thứ bất kể các điểm dừng giống như lớp phiên bản bootstrap trước đó '.hidden'

Thật không may, các lớp bootstrap 4 mới này không hoạt động giống như các lớp cũ trên div collapsekhi chúng đặt div hiển thị blockbắt đầu hiển thị thay vì ẩn và nếu bạn thêm một div bổ sung xung quanh collapsechức năng không còn hoạt động.

i like the bootstrap3 style as the device width of bootstrap4
so i modify the css as below
<pre>
.visible-xs, .visible-sm, .visible-md, .visible-lg { display:none !important; }
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display:none !important; }
@media (max-width:575px) {
table.visible-xs                { display:table !important; }
tr.visible-xs                   { display:table-row !important; }
th.visible-xs, td.visible-xs    { display:table-cell !important; }

.visible-xs                 { display:block !important; }
.visible-xs-block { display:block !important; }
.visible-xs-inline { display:inline !important; }
.visible-xs-inline-block { display:inline-block !important; }
}

@media (min-width:576px) and (max-width:767px) {
table.visible-sm { display:table !important; }
tr.visible-sm { display:table-row !important; }
th.visible-sm,
td.visible-sm { display:table-cell !important; }

.visible-sm { display:block !important; }
.visible-sm-block { display:block !important; }
.visible-sm-inline { display:inline !important; }
.visible-sm-inline-block { display:inline-block !important; }
}

@media (min-width:768px) and (max-width:991px) {
table.visible-md { display:table !important; }
tr.visible-md { display:table-row !important; }
th.visible-md,
td.visible-md { display:table-cell !important; }

.visible-md { display:block !important; }
.visible-md-block { display:block !important; }
.visible-md-inline { display:inline !important; }
.visible-md-inline-block { display:inline-block !important; }
}

@media (min-width:992px) and (max-width:1199px) {
table.visible-lg { display:table !important; }
tr.visible-lg { display:table-row !important; }
th.visible-lg,
td.visible-lg { display:table-cell !important; }

.visible-lg { display:block !important; }
.visible-lg-block { display:block !important; }
.visible-lg-inline { display:inline !important; }
.visible-lg-inline-block { display:inline-block !important; }
}

@media (min-width:1200px) {
table.visible-xl { display:table !important; }
tr.visible-xl { display:table-row !important; }
th.visible-xl,
td.visible-xl { display:table-cell !important; }

.visible-xl { display:block !important; }
.visible-xl-block { display:block !important; }
.visible-xl-inline { display:inline !important; }
.visible-xl-inline-block { display:inline-block !important; }
}

@media (max-width:575px)                        { .hidden-xs{display:none !important;} }
@media (min-width:576px) and (max-width:767px)  { .hidden-sm{display:none !important;} }
@media (min-width:768px) and (max-width:991px)  { .hidden-md{display:none !important;} }
@media (min-width:992px) and (max-width:1199px) { .hidden-lg{display:none !important;} }
@media (min-width:1200px)                       { .hidden-xl{display:none !important;} }
</pre>