부트 스트랩 4 반응 형 유틸리티 표시 / 숨김 xs sm lg가 작동하지 않음

Bootstrap 4로 마이그레이션 할 때 새로운 반응 형 유틸리티 숨김 / 표시 클래스에 문제가 있습니다 . 나는 .hidden- 클래스가되었는지 알고 v3의 제거 및 교체 와 함께 . 새 클래스를 사용하지만 요소가 표시 / 숨김으로 변경되지 않습니다. 이유를 알 수 없습니다..hidden-*-up .hidden-*-down.hidden-*-up.hidden-*-down

<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>

* 화면 크기 (Safari, 반응 형 디자인 모드)에 관계없이이 예에서는 아무것도 숨겨져 있지 않습니다.

Bootstrap으로 4 개의 .hidden-* 클래스가 완전히 제거되었습니다 (예, 대체 hidden-*-*되었지만 해당 클래스도 v4 알파에서 제거되었습니다 ).

v4- 베타부터 .d-*-none및 .d-*-block클래스를 결합 하여 동일한 결과를 얻을 수 있습니다.

visible- *도 제거 되었습니다. 명시 적 .visible-*클래스 를 사용하는 대신 요소를 숨기지 않고 표시되도록합니다 (다시 .d-none .d-md-block의 조합 사용). 다음은 작동하는 예입니다.

<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"진다 class="d-none d-sm-block"(또는 D-없음 D-SM-인라인 블록 ) ...

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

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

부트 스트랩 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

선적 서류 비치

화면 크기 클래스

-

1. 모든 .d-none 에 숨김

2. xs .d-none .d-sm-block 에서만 숨김

3. sm .d-sm-none .d-md-block 에만 숨김

4. md .d-md-none .d-lg-block 에서만 숨김

5. lg .d-lg-none .d-xl-block 에서만 숨김

6. xl .d-xl-none 에서만 숨김

7. 모든 .d-block에 표시

8. xs .d-block .d-sm-none 에서만 표시됩니다.

9. sm .d-none .d-sm-block .d-md-none 에서만 표시됩니다.

10. md .d-none .d-md-block .d-lg-none 에서만 볼 수 있습니다.

11. lg .d-none .d-lg-block .d-xl-none 에서만 표시됩니다.

12. xl .d-none .d-xl-block 에서만 표시

이 링크 http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements를 참조하십시오.

4.5 링크 : https://getbootstrap.com/docs/4.5/utilities/display/#hiding-elements

Bootstrap 4 (^ beta)는 반응 형 숨기기 / 표시 요소의 클래스를 변경했습니다. 사용할 올바른 클래스는 다음 링크를 참조하십시오. http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

작동하는 일부 버전

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