レスポンシブレイアウトで要素を非表示にするには?質問する

レスポンシブレイアウトで要素を非表示にするには?質問する

Bootstrap を調べてみると、小さい画面用にメニューバー項目を折りたたむ機能がサポートされているようです。ページ上の他の項目にも同様の機能がありますか?

たとえば、nav-pills を右にフロート表示しています。小さな画面では、これが問題を引き起こします。少なくとも、同様のクリックして詳細を表示するドロップダウンに配置したいと思います。

これは既存の Bootstrap フレームワーク内で可能ですか?

ベストアンサー1

Bootstrap に新しい可視クラスが追加されました

超小型デバイス携帯電話 (<768 ピクセル)(Class names : .visible-xs-block, hidden-xs)

小型デバイスタブレット (≥768px)(Class names : .visible-sm-block, hidden-sm)

中型デバイスデスクトップ (≥992 ピクセル)(Class names : .visible-md-block, hidden-md)

大型デバイスデスクトップ (≥1200px)(Class names : .visible-lg-block, hidden-lg)

詳細については :http://getbootstrap.com/css/#responsive-utilities


以下はv3.2.0以降では非推奨です


超小型デバイス 携帯電話 (<768 ピクセル)(Class names : .visible-xs, hidden-xs)

小型デバイス タブレット (≥768px)(Class names : .visible-sm, hidden-sm)

中型デバイス デスクトップ (≥992 ピクセル)(Class names : .visible-md, hidden-md)

大型デバイス デスクトップ (≥1200px)(Class names : .visible-lg, hidden-lg)


かなり古いBootstrap


.hidden-phone, .hidden-tablet等はサポートされていない/廃止されています。

アップデート:

Bootstrap 4 には 2 種類のクラスがあります。

  • hidden-*-upビューポートが指定されたブレークポイント以上にある場合に要素を非表示にします。
  • hidden-*-downビューポートが指定されたブレークポイント以下の場合に要素を非表示にします。

xlまた、幅が 1200 ピクセルを超えるデバイス用に新しいビューポートが追加されます。詳細についてはここをクリックしてください

おすすめ記事