☰

Bootstrap で visible-** と hidden-** が見つかりません 質問する

tag-icon • tag-icon twitter-bootstrap bootstrap-4
Bootstrap で visible-** と hidden-** が見つかりません 質問する

Bootstrap v3では、画面幅の異なる複数列レイアウトを制御するために、hidden-**クラスとclearfixを組み合わせてよく使用します。たとえば、

複数の hidden-** を 1 つの DIV に組み合わせて、複数の列をさまざまな画面幅で正しく表示することができます。

たとえば、製品写真の行を表示する場合、大きい画面サイズでは 1 行あたり 4 枚、小さい画面では 3 枚、非常に小さい画面では 2 枚です。製品写真の高さは異なる可能性があるため、行が適切に分割されるようにするには、clearfix が必要です。

以下は v3 の例です...

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

現在、v4 ではこれらのクラスが廃止され、visible/hidden-**-up/down クラスに置き換えられたため、代わりに複数の DIV で同じことを行う必要があるようです。

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

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

そのため、同じことを実現するために、単一の DIV から、多数の up/down クラスを持つ複数の 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 でこれを行うより良い方法はありますか?

ベストアンサー1

Bootstrap 5 のアップデート (2021)

Bootstrap 5には新しいxxlブレークポイントがあります。そのため表示クラスこれをサポートする新しい層があります:

xxl のみ非表示: d-xxl-none
xxl のみ表示:d-none d-xxl-block

ブートストラップ 4 (2018)

およびクラスはhidden-*Bootstrap 4ではもう存在しません。Bootstrap 4で特定の層またはブレークポイントの要素を非表示にしたい場合は、visible-*d-* 表示クラスそれに応じて。

より大きなブレークポイントによって上書きされない限り、 extra-small/mobile (以前のxs) がデフォルトの (暗黙の) ブレークポイントであることに留意してください。したがって、 Bootstrap 4 ではインフィックスは存在しなくなりました。-xs

ブレークポイントとダウンの表示/非表示:

  • 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(該当なし 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(該当なし 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(該当なし 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(該当なし 3.x) =d-none d-xl-block

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

また、要素の表示タイプに応じて、、 、などにd-*-block置き換えることができることに注意してください。詳細については、d-*-inlined-*-flexd-*-table-celld-*-table表示クラス

おすすめ記事