У меня есть этот код:
<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>
Четыре блока с некоторыми текстами внутри. Они равны по ширине, я'вэ комплект коль-см-3 для всех из них, и то, что я хочу сделать, это скрыть последний
книжкана дополнительной небольших устройств. Я'вэ пытался использовать скрытые-хз
на что навигация
и он это скрывает, но в то же время я хочу, чтобы другие блоки, чтобы расширить (изменить класс из коль-см-3 " на " коль-см-4)
коль-см-4 х 3 = 12`.
Любое решение?
На небольших устройства : 4 колонки х 3 (= 12) ==> кол-см-3
На дополнительной малой : 3 колонки х 4 (= 12) ==> коль-хз-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>
Как вы говорите, скрытые-хз недостаточно, нужно сочетать ХЗ и класс см.
Вот ссылка на официальный ДОК о доступный отзывчивый классов и о сеточная система.
В голове :
Прихлоп 4
Показать (скрытый/видимый) классы изменяются в Bootstrap 4. Для того чтобы спрятать на хз
использовать просмотра:
д-Нет д-см-блок`
<ч>
Бутстреп 3 (оригинальный ответ)
Используйте скрытые-хз` служебный класс..
<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>
См. документацию: https://getbootstrap.com/docs/4.0/utilities/display/
Для того, чтобы скрыть содержимое на мобильные и отображения на больше устройств, вы должны использовать следующие классы:
d-none d-sm-block
Первый класс набор дисплей нет всей техники и второй дисплей для устройств на "СМ" и до (вы можете использовать MD, LG и т. д. вместо того, чтобы см если вы хотите, чтобы показать на различных устройствах.
Я предлагаю прочитать о том, что перед миграцией:
https://getbootstrap.com/docs/4.0/migration/#responsive-utilities
<div class="small hidden-xs">
Some Content Here
</div>
Это также работает для элементов, которые не обязательно использовать в сетке /маленькие колонки. Когда он отображается на больших экранах шрифт-размер будет меньше, чем текста по умолчанию размер шрифта.
Этот ответ отвечает на вопрос в названии ОП (который является, как я нашел этот Q/а).