Скрытие элементов в адаптивном макете?

225

Просматривая загрузочный лоток, похоже, что они поддерживают свертывание элементов меню для меньших экранов. Есть ли что-то подобное для других элементов на странице?

Например, у меня есть наряду с Nav-таблетками, плавающими справа. На маленьком экране это вызывает проблемы. Мне бы хотелось, по крайней мере, поместить его в аналогичное раскрывающееся меню "нажмите и показать".

Возможно ли это в рамках существующей структуры Bootstrap?

Теги:
responsive-design

7 ответов

533

Новые видимые классы, добавленные в Bootstrap

Дополнительные мелкие устройства Телефоны (< 768px) (Class names : .visible-xs-block, hidden-xs)

Маленькие устройства Таблетки (≥768px) (Class names : .visible-sm-block, hidden-sm)

Средние устройства Настольные компьютеры (≥992px) (Class names : .visible-md-block, hidden-md)

Крупные устройства Настольные компьютеры (≥1200px) (Class names : .visible-lg-block, hidden-lg)

Для получения дополнительной информации: http://getbootstrap.com/css/#responsive-utilities


Ниже приведена устаревшая версия v3.2.0


Дополнительные небольшие устройства Телефоны (< 768px) (Class names : .visible-xs, hidden-xs)

Маленькие устройства Таблетки (≥768px) (Class names : .visible-sm, hidden-sm)

Средние устройства Настольные компьютеры (≥992px) (Class names : .visible-md, hidden-md)

Крупные устройства Настольные компьютеры (≥1200px) (Class names : .visible-lg, hidden-lg)


Значительно старше Bootstrap


.hidden-phone, .hidden-tablet и т.д. не поддерживаются/устарели.

  • 1
    Я не верю, что .hidden-phone и .hidden-tablet устарели ** - они ** не поддерживаются . Устаревший имеет тенденцию означать, что «был заменен другими подходами, хотя все еще поддержанный, должен скоро быть прекращен» . Похоже, что это имеет место с Bootstrap 3.2.0 - .visible-xs и тому подобным, пока работающим, в то время как .hidden-phone и друзья полностью отсутствуют в функциональности Bootstrap.
  • 2
    Спасибо - я обновил ответ до правильной формулировки. Должно быть немного понятнее другим пользователям сейчас.
Показать ещё 4 комментария
59

Bootstrap 4 Beta Ответ:

d-block d-md-none до скрывать на средних, больших и особо больших устройствах.

d-none d-md-block, чтобы скрыть небольшие и сверхмалые устройства.

Изображение 2349

Обратите внимание, что вы также можете встроить, заменив d-*-block на d-*-inline-block


Старый ответ: Bootstrap 4 Alpha

  • Вы можете использовать классы .hidden-*-up для скрытия на заданном размере и более крупных устройствах

    .hidden-md-up, чтобы скрывать на средних, больших и особо больших устройствах.

  • То же самое происходит с .hidden-*-down для скрытия на заданном размере и меньших устройствах

    .hidden-md-down, чтобы скрывать на средних, маленьких и сверхмалых устройствах

  • visible- * больше не является вариантом с загрузкой 4

  • Чтобы отображать только на средних устройствах, вы можете объединить два:

    hidden-sm-down и hidden-xl-up

Допустимые размеры:

  • xs для телефонов в портретном режиме (< 34em)
  • sm для телефонов в альбомном режиме (≥34em)
  • md для планшетов (≥48em)
  • lg для настольных компьютеров (≥62em)
  • xl для настольных компьютеров (≥75em)

Это был пример Bootstrap 4, alpha 5 (январь 2017). Подробнее здесь: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

  • 7
    Они были удалены из версии 4 бета. Теперь вы используете .d- классы, чтобы скрыть или показать в разных размерах. getbootstrap.com/docs/4.0/utilities/display
  • 1
    Я видел, но я все еще пытаюсь решить это .... Как мне спрятать что-то на маленьком экране только сейчас? Мне нужна противоположность d-md-none, так как я переключаю на div в зависимости от большого экрана против маленького экрана.
Показать ещё 3 комментария
21

Вы можете ввести эти суффиксы класса модуля для любого модуля, чтобы лучше контролировать, где он будет отображаться или быть скрытым.

.visible-phone  
.visible-tablet     
.visible-desktop    
.hidden-phone   
.hidden-tablet  
.hidden-desktop 

http://twitter.github.com/bootstrap/scaffolding.html прокрутите вниз

  • 0
    Спасибо - я действительно хочу, чтобы они были видны ... просто в сжатой / свернутой форме, такой как navbar-collapse, которая предназначена исключительно для navbar, и я не вижу никакой другой поддержки для других элементов ...
  • 0
    Они складываются в зависимости от имен классов и / или идентификаторов. Если вы найдете CSS / JS, вы можете добавить дополнительные классы / идентификаторы, которые делают то же самое.
Показать ещё 3 комментария
18

У меня есть несколько пояснений, которые можно добавить здесь:

1) Отображенный список (видимый-телефон, видимый-планшет и т.д.) устарел в Bootstrap 3. Новые значения:

  • visible-xs- *
  • visible-sm- *
  • видимой мкр - *
  • visible-lg- *
  • скрытого хз - *
  • hidden-sm- *
  • hidden-md- *
  • скрытых Л.Г. - *

Звездочка переводится следующим образом для каждого (я показываю только видимый-xs- * ниже):

  • видимый-XS-блок
  • Видимый-хз-рядный
  • Видимый-хз-рядный блок

2) Когда вы используете эти классы, вы не добавляете период впереди (как показано с ошибкой в ​​части ответа выше).

Например:

<div class="visible-md-block col-md-6 text-right text-muted">
   <h5>Copyright &copy; 2014 Jazimov</h5>
</div>

3) Вы можете использовать visible- * и hidden- * (например, visible-xs и hidden-xs), но они устарели в Bootstrap 3.2.0.

Для получения более подробной информации и новейших спецификаций перейдите сюда и найдите "видимый": http://getbootstrap.com/css/

  • 0
    Неверный hidden-xs-block недействителен, но visible-xs-block
  • 0
    @hmd: Можете ли вы предоставить источник / цитату для вашего комментария, который я даже не до конца понимаю, потому что это даже не полное предложение. Что именно вы пытаетесь поделиться? Вы говорите, что только hidden-xs-block недопустим, или вы говорите, что hidden-xs- * недопустим? Вы говорите, что hidden-md-block действителен, а hidden-xs-block - нет? Пожалуйста, уточните, особенно потому, что вы, кажется, понизили мой комментарий, когда я фактически скопировал словоблудие непосредственно из начальной документации по загрузке. На какую версию начальной загрузки вы ссылаетесь в своем комментарии?
Показать ещё 1 комментарий
2

Все классы hidden-*-up, hidden-* не работают для меня, поэтому я добавляю самодельный класс hidden до visible-* (который работает для текущей версии начальной загрузки). Это очень полезно, если вам нужно показать div только для одного экрана и скрыть все остальные.

CSS

.hidden {display:none;}

HTML:

<div class="col-xs-12 hidden visible-xs visible-sm">
   <img src="photo.png" style="width:100%">
</div>
  • 1
    скрытые классы * были исключены из бета-версии Bootstrap 4, теперь вы используете d- {sm, md, lg, xl} -не
  • 0
    Спасибо! На всякий случай мой ответ остается в силе для не-бета
0

hidden-* классы удаляются из Bootstrap 4 beta и далее.

Если вы хотите показывать на среднем и верхнем уровне классы d- *

например:

<div class="d-none d-md-block">This will show in medium and up</div>

Если вы хотите показывать только небольшими и ниже, используйте

   <div class="d-block d-md-none"> This will show only in below medium form factors</div>

Вместо того, чтобы использовать явные .visible- * классы, вы создаете элемент видимый, просто не скрывая его при этом размере экрана. Вы можете комбинировать один .d - нет класса с одним .d-блочным классом, чтобы показать только элемент на заданный интервал размеров экрана (например,.d-none.d-md-block.d-xl-none показывает элемент только на средних и больших устройствах).

Документация здесь

0

Для бета-версии 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

  • 0
    это печально, хотя это не работает нормально с переключателем коллапса
  • 0
    это сработало......

Ещё вопросы

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