Элемент скрытия начальной загрузки Twitter на небольших устройствах

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

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

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

На маленьком устройстве: 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 tra S mall : col-xs -__
  
• Для всех устройств SM : col-sm -__
  
• Для устройства M e D ium : col-md -__
  
• Для устройства L ar G e : col-lg -__
  
• Сделать только видимым (скрытым на другом): visible-md (только видимым на носителе [не в lg xs или sm])
• Сделать только скрытым (видимым на другом): hidden-xs (только скрытым в XtraSmall)

Бутстрап 4

Дисплей (скрытые / видимые) классы изменяются в Bootstrap 4. Чтобы скрыть от xsиспользования видового экрана:

d-none d-sm-block

Также смотрите: Отсутствует видимый - ** и скрытый - ** в Bootstrap v4

Bootstrap 3 (оригинальный ответ)

Используйте 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

Для 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

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

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

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