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

69

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

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

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

Теги:
twitter-bootstrap-3

4 ответа

123
Лучший ответ

На маленьком устройстве: 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)
Поделиться
  • 3
    Более подробная информация здесь getbootstrap.com/css/#responsive-utilities
  • 0
    Похоже, что в Bootstrap 4 вам нужно указать всплывающее окно через hidden-SIZE- (вверх | вниз). Пример: hidden-sm-down
Показать ещё 1 комментарий
59

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

Поделиться
  • 0
    Я использовал этот класс, но это было бесполезно, но в вашем примере вы добавили некоторые другие классы к другим навигаторам, которые изменили их отображение с 25% до 33% в ширину. Вот и все! Спасибо
  • 0
    Не за что, но я скучал по тому, что вы уже упоминали, используя «hidden-xs» в своем примере. +1 за ответ @ Jahnux73
8 
<div class="small hidden-xs">
    Some Content Here
</div>

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

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

Поделиться
  • 0
    Это работало нормально. Я использовал это, чтобы скрыть изображение. <div class = "small hidden-xs"> <a href=''link"> </a> </ div>
2

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

Поделиться
  • 2
    В 2018 году это должен быть принятый ответ

Ещё вопросы

Сообщество Overcoder
Наверх
Меню