Twitter Bootstrap Hide Element auf kleinen Geräten

92

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?

Crisan Raluca Teodora
quelle

Antworten:

153

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)
BENARD Patrick
quelle
Es scheint, dass Sie in Bootstrap 4 das Bubbling über hidden-SIZE- (up | down) angeben müssen. Beispiel: hidden-sm-down
Evan Siroky
Verwenden Sie für Bootstrap 2 die Klassehidden-phone
Katie
84

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

Zim
quelle
Ich habe diese Klasse verwendet, aber sie war nicht hilfreich, aber in Ihrem Beispiel haben Sie den anderen Navigationsgeräten einige andere Klassen hinzugefügt, deren Anzeige von 25% auf 33% geändert wurde. Das war's! Thx
Crisan Raluca Teodora
Gern geschehen, aber ich habe vermisst, dass Sie in Ihrem Beispiel bereits die Verwendung von 'hidden-xs' erwähnt haben. +1 für @ Jahnux73 Antwort
Zim
23

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

Przemek Nowak
quelle
12
<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).

Chris O.
quelle
Das hat gut funktioniert. Ich habe dies verwendet, um ein Bild zu verbergen. <div class = "small hidden-xs"> <a href=''link"> </a> </ div>
Arindam Roychowdhury