小さなデバイスのTwitterブートストラップ非表示要素

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

<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 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イウムデバイス：COL-MD -__
  
• 用L AR Gの電子デバイス：COL-LG -__
  
• メークのみ表示（他に隠された）：可視MD（培地中の[しないLG XSまたはSMで]だけ見えます）
• 作るだけで隠された（他の上に見える）：隠された-XS（ちょうどXtraSmallに隠されました）

ブートストラップ4

ディスプレイ（表示/非表示）クラスが上の非表示にするブートストラップ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

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

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

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

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