342

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

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

例として、製品写真の行を表示したい場合、大きな画面サイズでは行ごとに 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 でこれを行うより良い方法はありますか?

4

12 に答える 12

4

複数の 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。ブートストラップ 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;
  }
}
于 2016-02-12T12:35:55.673 に答える
3

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

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

.hidden-xs-down

xs 以下のものはすべて非表示にし、xs のみを非表示にします

.hidden-xs-up

全て隠してしまう

于 2016-02-11T22:56:26.550 に答える