web-dev-qa-db-ja.com

レスポンシブレイアウトで要素を隠す？

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

たとえば、私は一緒にナビゲーションピルが右に浮かんでいます。小さな画面ではこれが問題を引き起こします。少なくとも同様のclick-to-show-moreドロップダウンにそれを入れたいのですが。

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

htmlcsstwitter-bootstrapresponsive-design
277
Kaitlyn2004

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

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

スモールデバイス タブレット（≧768ピクセル）(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)

小型デバイスタブレット（≧768ピクセル）(Class names : .visible-sm, hidden-sm)

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

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

はるかに古いブートストラップ

.hidden-phone, .hidden-tabletなどはサポートされていない/時代遅れです。

更新：

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

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

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

628
Marc Uberstein

ブートストラップ4ベータ回答：

d-block d-md-noneto 中型、大型、特大型の非表示 デバイス。

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

enter image description here

d-*-blockをd-*-inline-blockに置き換えてインライン化することもできます。

旧回答：ブートストラップ4アルファ

  • あなたはクラス.hidden-*-upを使って与えられたサイズとより大きなデバイスを隠すことができます

    .hidden-md-upto 中型、大型、特大型の非表示 デバイス。

  • 同じことが.hidden-*-downにも当てはまります。

    .hidden-md-downto 中型、小型、超小型の非表示 デバイス

  • 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/

105
Julien

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

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

http://Twitter.github.com/bootstrap/scaffolding.html 一番下までスクロール

21
john taylor

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

1）表示されるリスト（visible-phone、visible-tabletなど）はBootstrap 3では推奨されません。新しい値は次のとおりです。

  • visible-xs- *
  • visible-sm- *
  • visible-md- *
  • visible-lg- *
  • hidden-xs- *
  • hidden-sm- *
  • hidden-md- *
  • hidden-lg- *

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

  • visible-xs-block
  • visible-xs-inline
  • 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/

19
Jazimov

hidden-*クラスはBootstrap 4ベータ版から削除されています。

あなたが中規模以上で見せたい場合は、d-*クラスを使用してください。

<div class="d-none d-md-block">This will show in medium and up</div>

あなたが小さいと以下でのみ見せたいならば、これを使ってください：

<div class="d-block d-md-none"> This will show only in below medium form factors</div>

画面サイズとクラス図 

| Screen Size        | Class                          |
|--------------------|--------------------------------|
| Hidden on all      | .d-none                        |
| Hidden only on xs  | .d-none .d-sm-block            |
| Hidden only on sm  | .d-sm-none .d-md-block         |
| Hidden only on md  | .d-md-none .d-lg-block         |
| Hidden only on lg  | .d-lg-none .d-xl-block         |
| Hidden only on xl  | .d-xl-none                     |
| Visible on all     | .d-block                       |
| Visible only on xs | .d-block .d-sm-none            |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block            |

明示的な.visible-*クラスを使用するのではなく、単にその画面サイズで非表示にしないことによって要素を表示可能にします。 1つの.d-*-noneクラスと1つの.d-*-blockクラスを組み合わせて、指定した画面サイズの間隔でのみ要素を表示することができます（たとえば、.d-none.d-md-block.d-xl-noneは中規模および大規模デバイスでのみ要素を表示します）。

ドキュメンテーション

16
kiranvj

Bootstrap 4.0 Beta（そしてこれは最終的なものであると思います）には変更があります - 隠されたクラスが削除されたことに注意してください。

ドキュメントを参照してください： https://getbootstrap.com/docs/4.0/utilities/display/

モバイルでコンテンツを非表示にしてより大きなデバイスで表示するには、次のクラスを使用する必要があります。

d-none d-sm-block

最初のクラスセットはすべてのデバイスにわたって表示されず、2番目のクラスセットはデバイスの「sm」まで表示します（異なるデバイスで表示する場合はsmの代わりにmd、lgなどを使用できます）。

移行の前にそれについて読むことをお勧めします。

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

2
Przemek Nowak

すべてのhidden-*-up、hidden-*クラスは私にはうまくいきません。そこで私はvisible-*の前に自作のhiddenクラスを追加します（これは現在のブートストラップバージョンで動作します）。 1つの画面にだけdivを表示し、それ以外の画面には非表示にする必要がある場合に非常に便利です。

CSS：

.hidden {display:none;}

HTML：

<div class="col-xs-12 hidden visible-xs visible-sm">
   <img src="photo.png" style="width:100%">
</div>
2
Gediminas

Boostrap 4.1（Bootstrapのドキュメントからテーブル全体のコードをコピーしたのでスニペットを実行）：

.fixed_headers {
  width: 750px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed_headers th {
  text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
  padding: 5px;
  text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
  min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
  min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
  width: 350px;
}
.fixed_headers thead {
  background-color: #333;
  color: #FDFDFD;
}
.fixed_headers thead tr {
  display: block;
  position: relative;
}
.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #DDD;
}
.old_ie_wrapper {
  height: 300px;
  width: 750px;
  overflow-x: hidden;
  overflow-y: auto;
}
.old_ie_wrapper tbody {
  height: auto;
}
<table class="fixed_headers">
  <thead>
    <tr>
      <th>Screen Size</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hidden on all</td>
      <td><code class="highlighter-rouge">.d-none</code></td>
    </tr>
    <tr>
      <td>Hidden only on xs</td>
      <td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on sm</td>
      <td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on md</td>
      <td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on lg</td>
      <td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on xl</td>
      <td><code class="highlighter-rouge">.d-xl-none</code></td>
    </tr>
    <tr>
      <td>Visible on all</td>
      <td><code class="highlighter-rouge">.d-block</code></td>
    </tr>
    <tr>
      <td>Visible only on xs</td>
      <td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
    </tr>
    <tr>
      <td>Visible only on sm</td>
      <td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
    </tr>
    <tr>
      <td>Visible only on md</td>
      <td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
    </tr>
    <tr>
      <td>Visible only on lg</td>
      <td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
    </tr>
    <tr>
      <td>Visible only on xl</td>
      <td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
    </tr>
  </tbody>
</table>

https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements

0
Tai Ly