Twitter bootstrap приховує елемент на невеликих пристроях

У мене є такий код:

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

Як ти кажеш, прихованих xs недостатньо, ти повинен поєднувати xs та sm клас.

Ось посилання на офіційний документ про доступні адаптивні класи та про систему сіток .

Майте в голові:

• 1 ряд = 12 зб
• Для торгового центру X tra S : 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)

Bootstrap 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 (саме так я знайшов це запитання / відповідь).