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

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

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

解決策:

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

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

使用例:

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

<div class="nav-pills hidden-xs">
  ...
</div>

追加メモ:

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

以上がブートストラップを使用してレスポンシブ レイアウトで要素を非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。