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-3
je wszystkie i chcę ukryć ostatnie nav
na bardzo małych urządzeniach. Próbowałem do użytku hidden-xs
na tym nav
i ukrywa go, ale w tym samym czasie chcę pozostałe bloki, aby rozwinąć (klasy zmiana od col-sm-3
do col-sm-4
) col-sm-4 X 3 = 12
.
Jakieś rozwiązanie?
html
css
twitter-bootstrap
twitter-bootstrap-3
responsive-design
Crisan Raluca Teodora
źródło
źródło
hidden-sm-down
hidden-phone
Bootstrap 4
Wyświetlacz (ukryte / niewidoczne) zajęcia są zmieniane w Bootstrap 4. Aby ukryć się na
xs
wykorzystaniem rzutni:d-none d-sm-block
Zobacz także: Brak widocznych - ** i ukrytych - ** w Bootstrap v4
Bootstrap 3 (oryginalna odpowiedź)
Użyj
hidden-xs
klasy 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
źródło
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
źródło
<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ź).
źródło