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

92

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?

Crisan Raluca Teodora
źródło

Odpowiedzi:

153

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)
BENARD Patrick
źródło
Wygląda na to, że w Bootstrap 4 musisz określić propagację poprzez hidden-SIZE- (góra | dół). Np .: hidden-sm-down
Evan Siroky
W przypadku Bootstrap 2 użyj klasyhidden-phone
Katie
84

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

Zim
źródło
Użyłem tej klasy, ale nie była pomocna, ale w twoim przykładzie dodałeś kilka innych klas do innych nawigacji, które zmieniły ich wyświetlanie z 25% na 33% szerokości. To było to! Dzięki
Crisan Raluca Teodora
Nie ma za co, ale przegapiłem, że wspomniałeś już o używaniu „hidden-xs” w swoim przykładzie. +1 za odpowiedź @ Jahnux73
Zim
23

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

Przemek Nowak
źródło
12
<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ź).

Chris O
źródło
To działało dobrze. Użyłem tego do ukrycia obrazu. <div class = "small hidden-xs"> <a href=''link"> </a> </div>
Arindam Roychowdhury