Bootstrap 4 как скрыть div только на среднем уровне
спросил
Изменено 5 лет, 4 месяца назад
Просмотрено 3к раз
Я хочу знать, как скрыть div только на среднем экране? Я пробовал много комбинаций, но ни одна из них не сработала есть ли какой-нибудь класс, который может скрыть MD только с добавлением пользовательского css?
- начальная загрузка-4
2
В бета-версии Bootstrap 4 прекращена поддержка классов hidden-*. Его заменили в пользу d-класса (дисплей).
Если вы хотите показать элемент только в определенной точке останова и выше, вы можете сделать:
Вот некоторый текст, который будет отображаться только на очень больших дисплеях, 1200 пикселей или выше.
Другой способ (который проще): показывать элемент, только если окно просмотра меньше, чем очень большой дисплей:
<диапазон> Вот некоторый текст, который будет отображаться до очень больших дисплеев, 1200 пикселей, но не шире.
Вы можете переключить тип отображения d-xl-inline на любой из d-классов, поддерживаемых начальной загрузкой.
Еще вопрос по теме.
Это та же проблема, что и при объяснении этого вопроса, чтобы скрыть только на маленьком экране просмотра. Предстоящее обновление для Bootstrap 4 Beta, которое позволит скрыть в одном окне просмотра (hidden-x)..
https://github.com/twbs/bootstrap/pull/22113
В этом обновлении будут переработаны все классы видимости.
Обновление для Bootstrap 4 Beta
Если вы хотите скрыть элемент на определенных уровнях (точках останова) в Bootstrap 4 Beta, используйте соответствующие классы отображения d-* .
Помните, что xs является точкой останова по умолчанию (всегда подразумеваемой), если только она не переопределена точкой останова большего размера .
-
скрытый-xs(только) =d-none d-sm-block(то же, что иhidden-xs-down) -
hidden-sm(только) =d-block d-sm-none d-md-block -
hidden-md(только) =d-block d-md-none d-lg-block -
hidden-lg(только) =d-block d-lg-none d-xl-block -
hidden-xl(только) =d-block d-xl-none
Демонстрация всех скрытых/видимых классов в Bootstrap 4 beta
Также обратите внимание, что d-*-block можно заменить на d-*-inline , d-*-flex и т. д. в зависимости от типа отображения элемента. Подробнее о классах отображения в бета-версии
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
html — Как скрыть элемент для мобильного устройства с bootstrap4?
спросил
Изменено 2 года, 4 месяца назад
Просмотрено 10 тысяч раз
В настоящее время я создаю сайт на основе bootstrap 4 и хочу оптимизировать его для мобильных устройств.
Как я могу не отображать элемент для определенных размеров экрана?
Обычно я использую «.hidden-sm-down», как описано здесь: https://v4-alpha.getbootstrap.com/layout/responsive-utilities/
Я также пробовал альтернативы, такие как: .d-none .d-md-block .d-xl-none или скрытый.
<дел>
<дел>
<а href="#">
d-нет |
| Скрыто только на хз | .d-none .d-sm-блок |
| Скрыто только на см | .d-sm-none .d-md-блок |
| Скрыто только на md | .d-md-none .d-lg-блок |
| Скрыто только на lg | .d-lg-none .d-xl-блок |
| Скрыто только на xl | .d-xl-нет |
| Виден на всех | .d-блок |
| Видно только на хз | .d-блок .d-sm-нет |
| Видно только на sm | .d-none .d-sm-block .d-md-none |
| Видно только на md | .d-none .d-md-block .d-lg-none |
| Видно только на LG | .d-none .d-lg-block .d-xl-none |
| Видно только на xl | .d-none .d-xl-блок |
