ブートストラップを使用してレスポンシブ レイアウトの要素を非表示にする

レスポンシブ レイアウトをデザインするとき、特に小さい画面ではスペースの管理が重要になります。 Bootstrap は、モバイル デバイス向けのメニュー バー項目の折りたたみをサポートしていますが、他のページ要素も同様に非表示にしたい場合はどうすればよいですか?

解決策:

Bootstrap は、次のことを可能にするクラスを提供します。画面サイズに基づいて要素を非表示にするには:

• 超小型デバイス: 電話(
• 小型デバイス: タブレット (≥768px) - .visible-sm-* (表示)、.hidden-sm (非表示)
• 中型デバイス:デスクトップ (≥992px) - .visible-md-* (表示)、.hidden-md (非表示)
• 大型デバイス: デスクトップ (≥1200px) - .visible-lg-* (表示)、.hidden-lg (非表示)

例使用法:

小さな画面で .nav-pills 要素を非表示にするには:

  ...

追加メモ:

• Bootstrap 4 の場合は、hidden-*-up (大きなブレークポイントの場合は非表示) または hidden-*-down を使用します。 (小さいブレークポイントの場合は非表示になります)。
• Bootstrap 3.2.0 では、.hidden-* が推奨されなくなりました。 .visible-*.
• 古い Bootstrap バージョンでは、.hidden-phone と .hidden-tablet は廃止されました。