333

ブートストラップを見ると、小さい画面のメニューバー項目の折りたたみをサポートしているように見えます。ページ上の他のアイテムに似たものはありますか？

たとえば、私はnav-pillsと一緒に右に浮かんでいます。小さな画面では、これにより問題が発生します。少なくとも、同様のClick-to-show-moreドロップダウンに入れたいと思います。

これは既存のブートストラップフレームワーク内で可能ですか？

4

9 に答える 9

667

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

超小型デバイス 電話 (<768px)(Class names : .visible-xs-block, hidden-xs)

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

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

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

詳細情報: http://getbootstrap.com/css/#responsive-utilities

以下は v3.2.0 で非推奨になりました

超小型デバイス 電話 (<768px)(Class names : .visible-xs, hidden-xs)

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

中型デバイス デスクトップ (≥992px)(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また、幅が 1200px を超えるデバイス用に新しいビューポートが追加されました。詳細については、ここをクリックしてください。

于 2013-12-27T14:53:46.390 に答える
191

Bootstrap 4 ベータ版の回答:

d-block d-md-none中型、大型、および特大のデバイスで非表示にします。

d-none d-md-block小型および超小型のデバイスで非表示にします。

ここに画像の説明を入力

d-*-blockに置き換えてインライン化することもできることに注意してくださいd-*-inline-block

古い答え: Bootstrap 4 Alpha

  • クラスを使用し.hidden-*-upて、特定のサイズ以上のデバイスで非表示にすることができます

    .hidden-md-up中型、大型、および特大のデバイスで非表示にします。

  • 同じことが.hidden-*-down、特定のサイズとより小さいデバイスで非表示にする場合にも当てはまります。

    .hidden-md-down中型、小型、超小型のデバイスで非表示にする

  • visible-* は、ブートストラップ 4 のオプションではなくなりました

  • 中型デバイスでのみ表示するには、次の 2 つを組み合わせることができます。

    hidden-sm-downとhidden-xl-up

有効なサイズは次のとおりです。

  • xs縦向きモードの携帯電話用 (<34em)
  • sm横向きモードの電話用 (≥34em)
  • mdタブレット用 (≥48em)
  • lgデスクトップ用 (≥62em)
  • xlデスクトップ用 (≥75em)

これは Bootstrap 4、alpha 5 (2017 年 1 月) の時点です。詳細はこちら: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

Bootstrap 4.3.x の場合: https://getbootstrap.com/docs/4.3/utilities/display/

于 2016-01-15T01:22:08.657 に答える
25

これらのモジュール クラス サフィックスを任意のモジュールに入力して、モジュールを表示または非表示にする場所をより適切に制御できます。

.visible-phone  
.visible-tablet     
.visible-desktop    
.hidden-phone   
.hidden-tablet  
.hidden-desktop

http://twitter.github.com/bootstrap/scaffolding.html 下にスクロール

于 2013-01-08T02:24:22.100 に答える
20

ここに追加する説明がいくつかあります。

1) 表示されているリスト (visible-phone、visible-tablet など) は Bootstrap 3 で廃止されました。新しい値は次のとおりです。

  • 見える-xs-*
  • 目に見える-sm-*
  • 目に見える-md-*
  • 目に見える-lg-*
  • hidden-xs-*
  • 隠しSM-*
  • 非表示-md-*
  • 非表示-lg-*

アスタリスクは、それぞれについて次のように変換されます (以下に visible-xs-* のみを示します)。

  • 可視-xs-ブロック
  • 可視-xs-インライン
  • visible-xs-inline-block

2）これらのクラスを使用する場合、前にピリオドを追加しません（上記の回答の一部で紛らわしく示されているように）。

例えば：

<div class="visible-md-block col-md-6 text-right text-muted">
   <h5>Copyright &copy; 2014 Jazimov</h5>
</div>

3) visible-* と hidden-* (たとえば、visible-xs と hidden-xs) を使用できますが、これらは Bootstrap 3.2.0 で廃止されました。

詳細と最新の仕様については、ここにアクセスして「visible」を検索してください: http://getbootstrap.com/css/

于 2014-10-25T11:44:15.607 に答える
1

追加 CSS モバイル ビューのすべてのページからサイドバーを削除します。

@media only screen and (max-width:767px)
{
#secondary {
display: none;
}
}
于 2020-08-13T02:26:09.193 に答える