94

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

<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極小のデバイスで最後を非表示にすることです。私はそれを使用しようとしましhidden-xsたがnav、それはそれを非表示にしますが、同時に他のブロックを展開したい (クラスを からcol-sm-3に変更col-sm-4) col-sm-4 X 3 = 12.

解決策はありますか？

4

4 に答える 4

155

小型デバイスの場合: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 列
  • X tra Sモール デバイスの場合: col-xs -__
  • SM全デバイスの場合：col-sm -__
  • M e D ium デバイスの場合: col-md -__
  • L ar G e Deviceの場合: col-lg -__
  • 可視化のみ(他では非表示) : visible-md (medium でのみ表示 [lg xs または sm では表示されない])
  • 非表示のみにする(他から見えるようにする) : hidden-xs (XtraSmall で非表示にするだけ)
于 2013-10-29T13:53:25.503 に答える
89

ブートストラップ 4

表示 (非表示/表示) クラスはBootstrap 4 で変更されました。xsビューポートで非表示にするには、次を使用します。

d-none d-sm-block

参照: Bootstrap v4 での visible-** と hidden-** の欠落

ブートストラップ 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

于 2013-10-29T13:53:16.283 に答える
12 
<div class="small hidden-xs">
    Some Content Here
</div>

これは、必ずしもグリッド/小列で使用されるとは限らない要素に対しても機能します。大きな画面でレンダリングすると、フォント サイズはデフォルトのテキスト フォント サイズよりも小さくなります。

この回答は、OP タイトルの質問を満たしています (これが、この Q/A を見つけた方法です)。

于 2016-01-14T15:00:48.870 に答える