web-dev-qa-db-ja.com

Bootstrap v4でvisible - **およびhidden - **がない

Bootstrap v3では、非表示の**クラスとclearfixを組み合わせて、さまざまな画面幅で複数列のレイアウトを制御することがよくあります。例えば、

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

一例として、製品写真の列を大きな画面サイズで1行に4つ、小さな画面に3つ、そして非常に小さな画面に2つ表示する場合を例として説明します。製品の写真は高さが異なる場合があるため、行が正しく改行されるようにするためにclearfixが必要です。

これがv3の例です...

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

これでv4はこれらのクラスを廃止し、それらを表示/非表示の上下のクラスに置き換えました。代わりに複数の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でこれを行うより良い方法はありますか？

twitter-bootstrapbootstrap-4
192
johna

ブートストラップ4用の更新プログラム（2018）

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

largeブレークポイントによって上書きされない限り、超小型/モバイル（以前のxs）がデフォルトの（暗黙の）ブレークポイントであることを忘れないでください。そのため、 ブートストラップ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と同じ）

ブレークポイントおよびup に対して表示/非表示：

  • 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

Show/hide 単一のブレークポイントの場合のみ ：

  • hidden-xs（only）= d-none d-sm-block（hidden-xs-downと同じ）
  • hidden-sm（only）= d-block d-sm-none d-md-block
  • hidden-md（only）= d-block d-md-none d-lg-block
  • hidden-lg（only）= d-block d-lg-none d-xl-block
  • hidden-xl（該当なし3.x）= d-block d-xl-none
  • visible-xs（only）= d-block d-sm-none
  • visible-sm（only）= d-none d-sm-block d-md-none
  • visible-md（only）= d-none d-md-block d-lg-none
  • visible-lg（only）= 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などに置き換えることができます。要素の表示タイプ。 ディスプレイクラスについてもっと読む

543
Zim

残念ながらすべてのクラスhidden-*-upとhidden-*-downはBootstrapから削除されました（Bootstrap Version 4 Beta 、Version 4 Alpha およびVersion 3 の時点でこれらのクラスはまだ存在しています）。

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

私は、新しいアプローチは状況によってはあまり役に立たないことを知りました。古いアプローチはHIDE要素でしたが、新しいアプローチはSHOW要素です。要素がブロック、インライン、インラインブロック、表などのいずれで表示されているかを知る必要があるため、要素の表示は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には含まれていませんでしたが、それらも同様に有用であり、自明のはずです。

27
Klaro

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>

これらの詳細 ここ 。

12
Sandy Brutas

私は複数のdivが良い解決策であることを期待していません。

また、.visible-sm-blockを.hidden-xs-downおよび.hidden-md-up（または同じメディアクエリに作用するために.hidden-sm-downおよび.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;
  }
}
4
Bass Jobsen

ユーザー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";
[..]
3
Michael Walter

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

あなたは今隠されているもののサイズをそのように定義しなければなりません

.hidden-xs-down

Xs以下から何でも隠しますが、xsのみ

.hidden-xs-up

すべてを隠します

3
Kyle Selman

残念ながら、これらの新しいブートストラップ4クラスは、表示されるdivをcollapseに設定するため、blockを使用してdiv上の古いクラスのように動作しません。 collapse機能は動作しなくなりました。

0
Scotty G

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

0
Lasantha