Щебетать загрузочный элемент на небольших устройствах

У меня есть этот код:

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

Четыре блока с некоторыми текстами внутри. Они равны по ширине, я установил для них все col-sm-3, и что я хочу сделать, это скрыть последний nav на дополнительных маленьких устройствах. Я попытался использовать hidden-xs на этом nav, и он скрывает его, но в то же время я хочу, чтобы другие блоки расширялись (измените класс с col-sm-3 на col-sm-4) col-sm-4 X 3 = 12.

Любое решение?

Ответ 1

На маленьком устройстве: 4 columns x 3 (= 12) ==> col-sm-3

В дополнение к маленькому: 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>

Как вы говорите, hidden-xs недостаточно, вам нужно объединить классы xs и sm.

Вот ссылки на официальный документ о доступных отзывчивых классах и о сетке .

Имейте в голову:

1 строка = 12 столбцов
Для X трассировки S: col-xs -__
Для SM все устройства: col-sm -__
Для M e D ium Устройство: col-md -__
Для L ar G e Устройство: col-lg -__
Сделать видимым только (скрытым на другом): visible-md (только видимый в средний [не в lg xs или sm])
Сделать скрытым только (видимым на другом): скрытый-xs (просто скрытый XtraSmall)

Ответ 2

Используйте класс утилиты hidden-xs..

<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

Ответ 3

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

Это также работает для элементов, которые не обязательно используются в сетке/малом столбце. Когда он отображается на больших экранах, размер шрифта будет меньше, чем размер шрифта по умолчанию.

Этот ответ удовлетворяет вопросу в заголовке OP (так я нашел этот Q/A).

Ответ 4

Для Bootstrap 4.0 есть изменение

См. документы: https://getbootstrap.com/docs/4.0/utilities/display/

Чтобы скрыть контент на мобильном устройстве и отобразить его на более крупных устройствах, вы должны использовать следующие классы:

d-none d-sm-block

Первый набор классов не отображает все устройства, а второй отображает его для устройств "sm" вверх (вы можете использовать md, lg и т.д. вместо sm, если вы хотите показывать на разных устройствах.

Я предлагаю прочитать об этом до миграции:

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