ブートストラップ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-beta以降では、.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-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>

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

ドキュメンテーション

画面サイズクラス

-

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ブロックで表示

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>