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


92

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

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

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

Ответы:


153

На маленьком устройстве: 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)

Похоже, что в Bootstrap 4 вам нужно указать восходящую цепочку через hidden-SIZE- (вверх | вниз). Пример: hidden-sm-down
Evan Siroky

Для Bootstrap 2 используйте classhidden-phone
Кэти

84

Бутстрап 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


Я использовал этот класс, но он не помог, но в вашем примере вы добавили некоторые другие классы к другим навигационным панелям, которые изменили их отображение с 25% до 33% в ширину. Это было! Thx
Crisan Raluca Теодора

Пожалуйста, но я пропустил то, что вы уже упомянули об использовании 'hidden-xs' в своем примере. +1 за ответ @ Jahnux73
Зим

23

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


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

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

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


Это сработало нормально. Я использовал это, чтобы скрыть изображение. <div class = "small hidden-xs"> <a href=''link"> </a> </div>
Ариндам Ройчоудхури
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.