[解決済み] bootstrap 4 responsive utilities visible / hidden xs sm lg not working.

質問

新しいレスポンシブ・ユーティリティで問題が発生しました。 非表示/可視クラス に移行する際に ブートストラップ4 . 私は、.hidden-クラスが から削除され、代わりに に置き換えられました。 .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、レスポンシブデザインモード）

どのように解決するのですか？

Bootstrap4で .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

ドキュメンテーション