bootstrap 4 tiện ích đáp ứng hiển thị / ẩn xs sm lg không hoạt động

Gặp sự cố với các lớp ẩn / hiện của tiện ích đáp ứng mới khi di chuyển sang Bootstrap 4 . Tôi biết rằng các lớp .hides- đã bị xóa khỏi v3 và được thay thế bằng .hidden-*-up .hidden-*-down. Sử dụng các .hidden-*-up.hidden-*-downlớp mới nhưng các phần tử không thay đổi thành hiển thị / ẩn. Không thể tìm ra lý do tại sao.

<div class="col hidden-xs-down">
    <span class="vcard">
        …
    </span>
</div>
<div class="col hidden-lg-down">
    <div class="hidden-sm-down">
                …
    </div>
    <div class="hidden-xs-down">
                …
    </div>
</div>

* không có gì bị ẩn trong ví dụ này, bất kể kích thước màn hình (Safari, Chế độ thiết kế đáp ứng)

Với Bootstrap, 4 .hidden-* lớp đã bị loại bỏ hoàn toàn (vâng, chúng đã được thay thế bằng hidden-*-*nhưng những lớp đó cũng biến mất khỏi v4 alphas).

Bắt đầu với v4-beta, bạn có thể kết hợp .d-*-nonevà .d-*-blockcác lớp để đạt được cùng một kết quả.

hiển thị- * cũng đã bị xóa ; thay vì sử dụng .visible-*các lớp rõ ràng , hãy làm cho phần tử hiển thị bằng cách không ẩn nó (một lần nữa, sử dụng kết hợp .d-none .d-md-block). Đây là ví dụ hoạt động:

<div class="col d-none d-sm-block">
    <span class="vcard">
        …
    </span>
</div>
<div class="col d-none d-xl-block">
    <div class="d-none d-md-block">
                …
    </div>
    <div class="d-none d-sm-block">
                …
    </div>
</div>

class="hidden-xs"trở thành class="d-none d-sm-block"(hoặc d-none d-sm-inline-block ) ...

<span class="d-none d-sm-inline">hidden-xs</span>

<span class="d-none d-sm-inline-block">hidden-xs</span>

Một ví dụ về các tiện ích đáp ứng Bootstrap 4 :

<div class="d-none d-sm-block"> hidden-xs           
  <div class="d-none d-md-block"> visible-md and up (hidden-sm and down)
    <div class="d-none d-lg-block"> visible-lg and up  (hidden-md and down)
      <div class="d-none d-xl-block"> visible-xl </div>
    </div>
  </div>
</div>

<div class="d-sm-none"> eXtra Small <576px </div>
<div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"> SMall ≥576px </div>
<div class="d-none d-md-block d-lg-none d-xl-none"> MeDium ≥768px </div>
<div class="d-none d-lg-block d-xl-none"> LarGe ≥992px </div>
<div class="d-none d-xl-block"> eXtra Large ≥1200px </div>

<div class="d-xl-none"> hidden-xl (visible-lg and down)         
  <div class="d-lg-none d-xl-none"> visible-md and down (hidden-lg and up)
    <div class="d-md-none d-lg-none d-xl-none"> visible-sm and down  (or hidden-md and up)
      <div class="d-sm-none"> visible-xs </div>
    </div>
  </div>
</div>

• codepen.io/_yatko/pen/ZJXQxy

Tài liệu

Loại kích thước màn hình

-

1. Ẩn trên tất cả .d-none

2. Chỉ ẩn trên xs .d-none .d-sm-block

3. Chỉ ẩn trên sm .d-sm-none .d-md-block

4. Chỉ ẩn trên md .d-md-none .d-lg-block

5. Chỉ ẩn trên lg .d-lg-none .d-xl-block

6. Chỉ ẩn trên xl .d-xl-none

7. Hiển thị trên tất cả .d-block

8. Chỉ hiển thị trên xs .d-block .d-sm-none

9. Chỉ hiển thị trên sm .d-none .d-sm-block .d-md-none

10. Chỉ hiển thị trên md .d-none .d-md-block .d-lg-none

11. Chỉ hiển thị trên lg .d-none .d-lg-block .d-xl-none

12. Chỉ hiển thị trên xl .d-none .d-xl-block

Tham khảo liên kết này http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

Liên kết 4.5: https://getbootstrap.com/docs/4.5/utilities/display/#hiding-elements

Bootstrap 4 (^ beta) đã thay đổi các lớp cho các phần tử ẩn / hiển thị đáp ứng. Xem liên kết này để biết các lớp học chính xác để sử dụng: http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

Một số phiên bản hoạt động

<div class="hidden-xs">Only Mobile hidden</div>
<div class="visible-xs">Only Mobile visible</div>