Element ukrywania bootstrapu na Twitterze na małych urządzeniach

Mam ten kod:

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

Cztery bloki z tekstami w środku. Mają jednakową szerokość, ustawiłem col-sm-3je wszystkie i chcę ukryć ostatnie navna bardzo małych urządzeniach. Próbowałem do użytku hidden-xsna tym navi ukrywa go, ale w tym samym czasie chcę pozostałe bloki, aby rozwinąć (klasy zmiana od col-sm-3do col-sm-4) col-sm-4 X 3 = 12.

Jakieś rozwiązanie?

Na małym urządzeniu: 4 columns x 3 (= 12) ==> col-sm-3

W przypadku bardzo małych: 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>

Jak mówisz, hidden-xs nie wystarczy, musisz połączyć klasę xs i sm.

Oto linki do oficjalnego dokumentu o dostępnych klasach responsywnych i systemie gridowym .

Miej w głowie:

• 1 rząd = 12 kol
• Dla urządzenia X tra S mall : col-xs -__
  
• Dla wszystkich urządzeń SM : col-sm -__
  
• Dla urządzenia M e D ium : col-md -__
  
• Dla urządzenia L ar G e : col-lg -__
  
• Pokaż tylko (ukryte na innych): visible-md (tylko widoczne w medium [nie w lg xs lub sm])
• Uczynić ukryty tylko (widoczne na innych): ukrytych XS (tylko ukryte w XtraSmall)

Bootstrap 4

Wyświetlacz (ukryte / niewidoczne) zajęcia są zmieniane w Bootstrap 4. Aby ukryć się na xswykorzystaniem rzutni:

d-none d-sm-block

Zobacz także: Brak widocznych - ** i ukrytych - ** w Bootstrap v4

Bootstrap 3 (oryginalna odpowiedź)

Użyj hidden-xsklasy użytkowej.

<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

W przypadku Bootstrap 4.0 nastąpiła zmiana

Zobacz dokumentację: https://getbootstrap.com/docs/4.0/utilities/display/

Aby ukryć zawartość na telefonie komórkowym i wyświetlić na większych urządzeniach, musisz skorzystać z następujących klas:

d-none d-sm-block

Pierwsza klasa nie wyświetla żadnych na wszystkich urządzeniach, a druga wyświetla to dla urządzeń "sm" up (możesz użyć md, lg itp. Zamiast sm, jeśli chcesz wyświetlać na różnych urządzeniach.

Proponuję o tym poczytać przed migracją:

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

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

Działa to również w przypadku elementów niekoniecznie używanych w siatce / małej kolumnie. Kiedy jest renderowany na większych ekranach, rozmiar czcionki będzie mniejszy niż domyślny rozmiar czcionki tekstu.

Ta odpowiedź jest odpowiedzią na pytanie w tytule PO (czyli jak znalazłem to pytanie / odpowiedź).