Twitter Bootstrap Hide Element auf kleinen Geräten

Ich habe diesen Code:

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

Vier Blöcke mit einigen Texten. Sie sind gleich breit, ich habe col-sm-3sie alle eingestellt und möchte die letzten navauf extra kleinen Geräten verstecken . Ich habe versucht, das zu verwenden hidden-xs, navund es verbirgt es, aber gleichzeitig möchte ich, dass die anderen Blöcke erweitert werden (Klasse von col-sm-3nach ändern col-sm-4) col-sm-4 X 3 = 12.

Irgendeine Lösung?

Auf kleinem Gerät: 4 columns x 3 (= 12) ==> col-sm-3

Auf extra klein: 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>

Wie Sie sagen, ist verstecktes-xs nicht genug, Sie müssen xs und sm-Klasse kombinieren.

Hier finden Sie Links zum offiziellen Dokument über verfügbare Reaktionsklassen und über das Rastersystem .

Habe im Kopf:

• 1 Zeile = 12 Spalten
• Für X tra S mall-Geräte : col-xs -__
  
• Für SM alle Geräte : col-sm -__
  
• Für M e D ium-Gerät : col-md -__
  
• Für L ar G e Gerät : col-lg -__
  
• Stellen nur sichtbar (auf andere versteckt): sichtbar-md (nur sichtbar in Medium [nicht in lg xs oder sm])
• Machen Sie nur versteckt (sichtbar auf andere): hidden-xs (nur in XtraSmall versteckt)

Bootstrap 4

Die Anzeigeklassen (ausgeblendet / sichtbar) werden in Bootstrap 4 geändert. Um sie im xsAnsichtsfenster auszublenden, verwenden Sie:

d-none d-sm-block

Siehe auch: Fehlende sichtbare - ** und versteckte - ** in Bootstrap v4

Bootstrap 3 (ursprüngliche Antwort)

Verwenden Sie die hidden-xsUtility-Klasse.

<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

Für Bootstrap 4.0 gibt es eine Änderung

Siehe die Dokumente: https://getbootstrap.com/docs/4.0/utilities/display/

Um den Inhalt auf Mobilgeräten auszublenden und auf größeren Geräten anzuzeigen, müssen Sie die folgenden Klassen verwenden:

d-none d-sm-block

Das Set der ersten Klasse zeigt keine Geräte an und das zweite zeigt es für Geräte "sm" an (Sie können md, lg usw. anstelle von sm verwenden, wenn Sie auf verschiedenen Geräten anzeigen möchten.

Ich schlage vor, vor der Migration darüber zu lesen:

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

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

Dies funktioniert auch für Elemente, die nicht unbedingt in einem Raster / einer kleinen Spalte verwendet werden. Wenn es auf größeren Bildschirmen gerendert wird, ist die Schriftgröße kleiner als Ihre Standardschriftgröße.

Diese Antwort erfüllt die Frage im OP-Titel (so habe ich diese Frage / Antwort gefunden).