web-dev-qa-db-ja.com

Twitter bootstrap小型デバイスの要素を非表示

私はこのコードを持っています：

<footer class="row">
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 1</li>
      <li>Text 2</li>
      <li>Text 3</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 4</li>
      <li>Text 5</li>
      <li>Text 6</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 7</li>
      <li>Text 8</li>
      <li>Text 9</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 10</li>
      <li>Text 11</li>
      <li>Text 12</li>
    </ul>
  </nav>
</footer>

内部にテキストを含む4つのブロック。それらは幅が等しいので、col-sm-3をすべてに設定しました。私がやりたいのは、余分な小さなデバイスで最後のnavを非表示にすることです。私はそのnavでhidden-xsを使用しようとしましたが、それを非表示にしましたが、同時に他のブロックを展開したいです（クラスをcol-sm-3からcol-sm-4に変更）col-sm-4 X 3 = 12。

解決策はありますか？

htmlcsstwitter-bootstraptwitter-bootstrap-3responsive-design
85
Crisan Raluca Teodora

小さなデバイスの場合：4 columns x 3 (= 12) ==> col-sm-3

極小：3 columns x 4 (= 12) ==> col-xs-4

 <footer class="row">
        <nav class="col-xs-4 col-sm-3">
            <ul class="list-unstyled">
            <li>Text 1</li>
            <li>Text 2</li>
            <li>Text 3</li>
            </ul>
        </nav>
        <nav class="col-xs-4 col-sm-3">
            <ul class="list-unstyled">
            <li>Text 4</li>
            <li>Text 5</li>
            <li>Text 6</li>
            </ul>
        </nav>
        <nav class="col-xs-4 col-sm-3">
            <ul class="list-unstyled">
            <li>Text 7</li>
            <li>Text 8</li>
            <li>Text 9</li>
            </ul>
        </nav>
        <nav class="hidden-xs col-sm-3">
            <ul class="list-unstyled">
            <li>Text 10</li>
            <li>Text 11</li>
            <li>Text 12</li>
            </ul>
        </nav>
    </footer>

あなたが言うように、hidden-xsでは十分ではありません。xsとsmクラスを組み合わせる必要があります。

使用可能なレスポンシブクラス および グリッドシステム についての公式ドキュメントへのリンクがあります。

頭にある：

  • 1行= 12列
  • ForXtraSモールデバイス：col-xs-__
  • ForSMall device：col-sm-__
  • ForMeDiumデバイス：col-md-__
  • ForLarGeデバイス：col-lg-__
  • のみを表示する（他に隠れている）：visible-md（ちょうど媒体で見える[lg xsまたはsmではない]）
  • hidden only（他に見える）：hidden-xs（just XtraSmallに非表示）
142
Pimento Web

ブートストラップ4

display（hidden/visible）クラス はBootstrapで変更されます。4. xsビューポートで非表示にするには：

d-none d-sm-block

参照： Missing visible-** and hidden-** in Bootstrap v4

Bootstrap 3（元の回答）

hidden-xsユーティリティクラスを使用します。

<nav class="col-sm-3 hidden-xs">
        <ul class="list-unstyled">
        <li>Text 10</li>
        <li>Text 11</li>
        <li>Text 12</li>
        </ul>
</nav>

http://bootply.com/90722

74
Zim

Bootstrap 4.0には変更があります

ドキュメントを参照してください： 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

19
Przemek Nowak
<div class="small hidden-xs">
    Some Content Here
</div>

これは、グリッド/小列で必ずしも使用されない要素でも機能します。大きな画面でレンダリングされる場合、font-sizeはデフォルトのテキストfont-sizeよりも小さくなります。

この回答は、OPタイトルの質問（このQ/Aを見つけた方法）を満たします。

12
Chris O