Bootstrap v4のvisible-**およびhidden-**がありません

Bootstrap v3では、多くの場合、hidden-**クラスをclearfixと組み合わせて使用​​して、さまざまな画面幅で複数列のレイアウトを制御します。例えば、

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

例として、製品の写真の行を、大きな画面サイズでは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 4（2018）のアップデート

hidden-*そしてvisible-*クラスがもはや存在しないあなたは、ブートストラップ4で特定の階層やブレークポイントの要素を非表示に使用したい場合は、ブートストラップ4でd-* 表示クラスをそれに応じて。

より大きなブレークポイントでxsオーバーライドされない限り、extra-small / mobile（以前の）がデフォルトの（暗黙の）ブレークポイントであることに注意してください。したがって、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（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 （該当なし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-*-inline、d-*-flex、d-*-table-cell、d-*-tableなど。要素の表示タイプによって異なります。ディスプレイクラスについて詳しく読む

残念ながら、すべてのクラスhidden-*-upおよびhidden-*-downブートストラップから削除された（ブートストラップバージョンのよう4ベータバージョンでは、4アルファおよびバージョン3これらのクラスはまだ存在していました）。

代わりに、httpsd-*：//getbootstrap.com/docs/4.0/migration/#utilitiesのように、新しいクラスを使用する必要があります。

新しいアプローチは状況によってはあまり役に立たないことがわかりました。古いアプローチはしたHIDEの新しいアプローチをしている間の要素を表示要素。要素がブロック、インライン、インラインブロック、テーブルなどとして表示されているかどうかを知る必要があるため、CSSでは要素の表示はそれほど簡単ではありません。

次のCSSを使用して、Bootstrap 3から既知の以前の「hidden- *」スタイルを復元することができます。

/*\
 * Restore Bootstrap 3 "hidden" utility classes.
\*/

/* Breakpoint XS */
@media (max-width: 575px)
{
    .hidden-xs-down, .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, 
    .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    }

}

/* Breakpoint SM */
@media (min-width: 576px) and (max-width: 767px)
{
    .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, 
    .hidden-unless-xs, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint MD */
@media (min-width: 768px) and (max-width: 991px)
{
    .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint LG */
@media (min-width: 992px) and (max-width: 1199px)
{
    .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint XL */
@media (min-width: 1200px)
{
    .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, .hidden-xl-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg
    {
        display: none !important;
    } 
}

クラスhidden-unless-*はBootstrap 3に含まれていませんでしたが、それらも有用であり、一目瞭然です。

Bootstrap v4.1は、グリッドシステムの列を非表示にするために新しいクラス名を使用します。

画面の幅に応じて列を非表示にするには、d-noneクラスまたは任意のクラスを使用しd-{sm,md,lg,xl}-noneます。特定の画面サイズで列を表示するには、上記のクラスをd-blockまたはd-{sm,md,lg,xl}-blockクラスと組み合わせます。

次に例を示します。

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

これらの詳細はこちら。

複数のdivが良い解決策になるとは思いません。

また.visible-sm-block、.hidden-xs-downand .hidden-md-up（または.hidden-sm-downand .hidden-lg-upを同じメディアクエリで実行する）に置き換えることもできます。

hidden-sm-up コンパイル：

.visible-sm-block {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}

.hidden-sm-downそして.hidden-lg-upコンパイルして：

@media (max-width: 768px) {
  .hidden-xs-down {
    display: none !important;
  }
}
@media (min-width: 991px) {
  .hidden-lg-up {
    display: none !important;
  }
}

両方の状況は同じように動作するはずです。

あなたが代わるしようとすると、状況が異なってくる.visible-sm-blockと.visible-lg-block。Bootstrap v4のドキュメントはあなたに言っています：

これらのクラスは、要素の可視性をビューポートブレークポイントサイズの連続する単一の範囲として表現できない、あまり一般的でないケースに対応しようとするものではありません。そのような場合は、代わりにカスタムCSSを使用する必要があります。

.visible-sm-and-lg {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-and-lg {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-sm-and-lg {
    display: block !important;
  }
}

ユーザーKlaroは古い可視性クラスを復元​​することを提案しましたが、これは良い考えです。残念ながら、それらのソリューションは私のプロジェクトでは機能しませんでした。

ユーザーが個別に定義できるすべてのブレークポイントをカバーしているため、ブートストラップの古いミックスインを復元することをお勧めします。

これがコードです：

// Restore Bootstrap 3 "hidden" utility classes.
@each $bp in map-keys($grid-breakpoints) {
  .hidden-#{$bp}-up {
    @include media-breakpoint-up($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-down {
    @include media-breakpoint-down($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-only{
    @include media-breakpoint-only($bp){
      display:none !important;
    }
  }
}

私の場合、この部分_custom.scssをこの時点で含まれているファイルに挿入しましたbootstrap.scss：

/*!
 * Bootstrap v4.0.0-beta (https://getbootstrap.com)
 * Copyright 2011-2017 The Bootstrap Authors
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@import "functions";
@import "variables";
@import "mixins";
@import "custom"; // <-- my custom file for overwriting default vars and adding the snippet from above
@import "print";
@import "reboot";
[..]

http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

隠されているもののサイズを定義する必要があります

.hidden-xs-down

xs以下から何かを隠し、xsのみ

.hidden-xs-up

すべてを隠す

ブートストラップ4の場合、画面サイズに依存する要素の表示/非表示に使用されるクラスを説明するマトリックスイメージを次に示します。

出典：Meduim：Bootstrap 4 Hidden＆Visible

コンテンツ全体を非表示にするブートストラップ4は、このクラス「.d-none」を使用します。これは、以前のブートストラップバージョンクラス「.hidden」と同じように、ブレークポイントに関係なくすべてを非表示にします。

残念ながら、これらの新しいブートストラップ4クラスは、div上の古いクラスのようには機能しません。非表示ではなく表示から開始する表示collapsedivを設定しているためblock、collapse機能の周りに余分なdivを追加すると機能しなくなります。

i like the bootstrap3 style as the device width of bootstrap4
so i modify the css as below
<pre>
.visible-xs, .visible-sm, .visible-md, .visible-lg { display:none !important; }
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display:none !important; }
@media (max-width:575px) {
table.visible-xs                { display:table !important; }
tr.visible-xs                   { display:table-row !important; }
th.visible-xs, td.visible-xs    { display:table-cell !important; }

.visible-xs                 { display:block !important; }
.visible-xs-block { display:block !important; }
.visible-xs-inline { display:inline !important; }
.visible-xs-inline-block { display:inline-block !important; }
}

@media (min-width:576px) and (max-width:767px) {
table.visible-sm { display:table !important; }
tr.visible-sm { display:table-row !important; }
th.visible-sm,
td.visible-sm { display:table-cell !important; }

.visible-sm { display:block !important; }
.visible-sm-block { display:block !important; }
.visible-sm-inline { display:inline !important; }
.visible-sm-inline-block { display:inline-block !important; }
}

@media (min-width:768px) and (max-width:991px) {
table.visible-md { display:table !important; }
tr.visible-md { display:table-row !important; }
th.visible-md,
td.visible-md { display:table-cell !important; }

.visible-md { display:block !important; }
.visible-md-block { display:block !important; }
.visible-md-inline { display:inline !important; }
.visible-md-inline-block { display:inline-block !important; }
}

@media (min-width:992px) and (max-width:1199px) {
table.visible-lg { display:table !important; }
tr.visible-lg { display:table-row !important; }
th.visible-lg,
td.visible-lg { display:table-cell !important; }

.visible-lg { display:block !important; }
.visible-lg-block { display:block !important; }
.visible-lg-inline { display:inline !important; }
.visible-lg-inline-block { display:inline-block !important; }
}

@media (min-width:1200px) {
table.visible-xl { display:table !important; }
tr.visible-xl { display:table-row !important; }
th.visible-xl,
td.visible-xl { display:table-cell !important; }

.visible-xl { display:block !important; }
.visible-xl-block { display:block !important; }
.visible-xl-inline { display:inline !important; }
.visible-xl-inline-block { display:inline-block !important; }
}

@media (max-width:575px)                        { .hidden-xs{display:none !important;} }
@media (min-width:576px) and (max-width:767px)  { .hidden-sm{display:none !important;} }
@media (min-width:768px) and (max-width:991px)  { .hidden-md{display:none !important;} }
@media (min-width:992px) and (max-width:1199px) { .hidden-lg{display:none !important;} }
@media (min-width:1200px)                       { .hidden-xl{display:none !important;} }
</pre>