<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. Są równej szerokości, ustawiłem dla nich col-sm-3 i chcę ukryć ostatnią nawigację na bardzo małych urządzeniach. Próbowałem użyć ukrytego xs na tym urządzeniu nawigacyjnym i to ukrywa je, ale jednocześnie chcę, aby inne bloki rozszerzyły się (zmiana klasy z col-sm-3 nacol-sm-4) col-sm-4 X 3 = 12.
0
1 odpowiedź
Na małych urządzeniach : 4 columns x 3 (= 12) ==> col-sm-3
Na bardzo małych urządzeniach : 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, ukryte xs nie wystarczy, musisz połączyć klasę xs i sm.
0