[解決済み] Bootstrap v4におけるvisible-**とhidden-**の欠落について

質問

Bootstrap v3では、異なる画面幅でマルチカラムレイアウトを制御するために、hidden-**クラスとclearfixを組み合わせて使うことがよくあります。例えば

1つのDIVに複数のhidden-**を組み合わせることで、異なる画面幅でマルチカラムを正しく表示させることができますね。

例えば、商品写真の列を表示する場合、大きな画面サイズでは1列4枚、小さな画面では3枚、そして非常に小さな画面では2枚とします。商品写真の高さはそれぞれ異なるので、clearfixを使用して行を適切に分割する必要があります。

v3での例です...

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

v4ではこれらのクラスが廃止され、visible/hidden-**-up/downクラスに置き換えられたので、代わりに複数のDIVで同じことをしなければならないようです。

以下はv4での同様の例です...

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

そのため、単一のDIVから、同じことを実現するために、たくさんの上下クラスで複数のDIVを追加しなければならなくなったのです。

から...

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

から...

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

私が見落としている、v4でのより良い方法はありますか？

解決方法は？

Bootstrap 5のアップデート(2020年)

Bootstrap5（現在α版）には、新たに xxl ブレークポイント . そのため ディスプレイクラス には、これをサポートする新しい階層があります。

xxlのみ非表示。 d-xxl-none
xxlのみ表示可能です。 d-none d-xxl-block

ブートストラップ4（2018年）

は hidden-* と visible-* クラス 存在しない をBootstrap 4で使用することができます。Bootstrap 4 で、特定の階層やブレイクポイントで要素を隠したい場合は d-* 表示クラス を適宜選択してください。

エクストラ・スモール/モバイル（旧 xs で上書きされない限り、デフォルトの (暗黙の) ブレークポイントになります。 より大きい ブレークポイント したがって その -xs は、Bootstrap 4 にはもう存在しません。 .

の表示/非表示を設定します。 ブレイクポイントとダウン :

• 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 (同 hidden )

の表示/非表示を設定します。 ブレークポイント以上 :

• hidden-xs-up = d-none (と同じ hidden )
• hidden-sm-up = d-sm-none
• hidden-md-up = d-md-none
• hidden-lg-up = d-lg-none
• hidden-xl-up (n/a 3.x) = d-xl-none

表示/非表示 単一のブレークポイントのみ :

• hidden-xs (のみ）＝。 d-none d-sm-block (と同じ hidden-xs-down )
• hidden-sm (のみ）＝。 d-block d-sm-none d-md-block
• hidden-md (のみ）＝。 d-block d-md-none d-lg-block
• hidden-lg (のみ）＝。 d-block d-lg-none d-xl-block
• hidden-xl (n/a 3.x) = d-block d-xl-none
• visible-xs (のみ）＝。 d-block d-sm-none
• visible-sm (のみ）＝。 d-none d-sm-block d-md-none
• visible-md (のみ）＝。 d-none d-md-block d-lg-none
• visible-lg (のみ）＝。 d-none d-lg-block d-xl-none
• visible-xl (n/a 3.x) = d-none d-xl-block

Bootstrap 4 のレスポンシブディスプレイクラスのデモ

また なお d-*-block で置き換えることができます。 d-*-inline , d-*-flex , d-*-table-cell , d-*-table など、要素の表示形式によって異なります。詳しくは 表示クラス