bootstrapを見てみると、小さい画面用にメニューバーの項目を折り畳むことをサポートしているようです。ページ上の他の項目についても同様のことができますか?
例えば、私は右にフローティングされたnav-pillsと一緒に
これは既存のBootstrapフレームワークで可能でしょうか?
超小型デバイス。
電話 (<768px) (クラス名 : .visible-xs-block, hidden-xs)
。
小型デバイス - 超小型デバイス
タブレット(768px以上) (クラス名 : .visible-sm-block, hidden-sm)
**中型のデバイス
デスクトップ(992px以上) (クラス名:.visible-md-block, hidden-md)
大規模なデバイス)
デスクトップ(1200px以上) (クラス名:.visible-lg-block, hidden-lg)
以下はv3.2.0で非推奨となりました。
超小型デバイス
電話 (<768px) (クラス名 : .visible-xs, hidden-xs)
)
小型デバイス
タブレット(768px以上) (クラス名:.visible-sm, hidden-sm)
)
中型デバイス
デスクトップ (≥992px) (クラス名:.visible-md, hidden-md)
。
大型デバイス
デスクトップ(1200px以上) (クラス名:.visible-lg, hidden-lg)
)
かなり古いBootstrap。
.hidden-phone, .hidden-tablet` などはサポートされていません/廃止されました。
**アップデイト:***。
Bootstrap 4では、2種類のクラスがあります。
hidden-*-up
これは、ビューポートが指定されたブレークポイントかそれよりも広いときに、要素を隠すものです。hidden-*-down
これは、ビューポートが指定されたブレークポイントかそれよりも小さいときに、要素を隠します。また、幅が1200px以上のデバイスに対しては、新たにxl
ビューポートが追加されています。詳しくはこちらを参照してください。
モジュールクラスのサフィックスを入力することで、モジュールの表示・非表示をコントロールすることができます。
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop
http://twitter.github.com/bootstrap/scaffolding.html 下へスクロール
ここで、いくつか説明を加えておきたいと思います。
アスタリスクは、それぞれ以下のように変換されます(以下ではvisible-xs-*のみを表示しています)。
例えば、以下のようになります。
<div class="visible-md-block col-md-6 text-right text-muted">
<h5>Copyright © 2014 Jazimov</h5>
</div>
詳細や最新の仕様については、こちらにアクセスして、"visible"で検索してください。 http://getbootstrap.com/css/