Sm hidden bootstrap: Missing visible-** and hidden-** in Bootstrap

Адаптивные утилиты · Bootstrap на русском

Варианты структурирования страниц с Bootstrap, включая глобальные стили, необходимые инструменты, блочная система и другие.

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

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

Доступные классы

• .hidden-*-up классы скрыть элемент, когда область просмотра на данном останова или шире. Например, .hidden-md-up скрывает элемент на средних, больших и сверхбольших экранах.
• .hidden-*-down классы скрыть элемент, когда область просмотра на данном останова или меньше. Например, .hidden-md-down скрывает элемент на очень малых, малых и средних видовых экранов.
• Нет явного “видимый”/”Показать” aдаптивный служебные классы; сделать элемент видимым, просто не скрывая его при этом размер точки останова.
• Можно комбинировать один .hidden-*-up класс с .hidden-*-down класс, чтобы показать элемент только на заданном интервале размеров экрана. Например, .hidden-sm-down.hidden-xl-up показан элемент только на средних и больших экранах. Через несколько .hidden-*-up классы или нескольких .hidden-*-down занятия является излишним и бессмысленным.
• Эти классы не пытайтесь вместить в менее распространенных случаях, когда видимость элемента не может быть выражено как один непрерывный диапазон размеров останова просмотра; вместо этого, вы должны использовать пользовательские CSS в таких случаях.

	Дополнительные небольшие устройства Портрет телефонам (<544px)	Небольшие устройства Ландшафтный телефонов (≥544px — <768px по)	Средние устройств Планшеты (≥768px по — <992px)	Большие устройства Настольные компьютеры (≥992px — <1200px)	Дополнительных устройств с большим Настольные (≥1200px)
. hidden-xs-down	Hidden	Visible	Visible	Visible	Visible
.hidden-sm-down	Hidden	Hidden	Visible	Visible	Visible
.hidden-md-down	Hidden	Hidden	Hidden	Visible	Visible
.hidden-lg-down	Hidden	Hidden	Hidden	Hidden	Visible
.hidden-xl-down	Hidden	Hidden	Hidden	Hidden	Hidden
.hidden-xs-up	Hidden	Hidden	Hidden	Hidden	Hidden
. hidden-sm-up	Visible	Hidden	Hidden	Hidden	Hidden
.hidden-md-up	Visible	Visible	Hidden	Hidden	Hidden
.hidden-lg-up	Visible	Visible	Visible	Hidden	Hidden
.hidden-xl-up	Visible	Visible	Visible	Visible	Hidden

Классы печати

Как и обычные адаптивные классы, используйте их для переключения содержания для печати.

Класс	Браузер	Печать
. visible-print-block	Hidden	Visible (as display: block)
.visible-print-inline	Hidden	Visible (as display: inline)
.visible-print-inline-block	Hidden	Visible (as display: inline-block)
.hidden-print	Visible	Hidden

Тестовые сценарии

Измените размер вашего браузера или загрузки на различные устройствах для проверки реагирования служебных классов.

Зеленые галочки указывают, что элемент видимый в вашем текущем экране.

✔ Отображается на дополнительной небольшой Очень маленькие

✔ Видно на маленьких или узких Маленький или узкий

✔ Отображается на средний или узкий Средний или узкий

✔ Видимый на большие или узкие Большие или узкие

---

✔ Видно на маленьких или шире Небольшой или шире

✔ Отображается на средних или широких Средний или шире

✔ Видимый на большие или шире Большие или широкие

✔ Видны на очень большой Очень большая

---

✔ Ваши просмотра именно сверхмалые Вашего просмотра точно не очень маленькая

✔ Ваши просмотра именно небольшой Вашего просмотра точно не маленький

✔ Ваши просмотра именно средний Вашего просмотра точно не средний

✔ Ваши просмотра именно большие Вашего просмотра точно не большие

✔ Ваши просмотра точно очень большая Вашего просмотра точно не очень большой

Bootstrap 4 — Управление отображением элементов

В этой статье познакомимся с классами фреймворка Bootstrap 4, которые предназначены для адаптивного управления CSS свойством display HTML элементов.

Display-классы Bootstrap

В Bootstrap 4 имеется категория классов, с помощью которых можно не только адаптивно скрывать элементы, но и управлять тем как они должны быть показаны на странице.

Список display-классов Bootstrap 4:

• d-none
• d-inline
• d-inline-block
• d-block
• d-table
• d-table-cell
• d-flex
• d-inline-flex

Первый класс (d-none) предназначен для скрытия элемента на странице. Осуществляет это он посредством установки HTML элементу CSS свойства display со значение none.

Остальные классы управляют тем, как элемент должен быть представлен на странице. Класс d-inline представляет элемент строчным (display: inline), d-block – блочным (display: block), d-inline-block — строчно-блочным (display: inline-block), d-table – таблицой (display: table), d-table-cell – ячейкой таблицы (display: table-cell

), d-flex – блочным flex-контейнером (display: flex), d-inline-flex — строчным flex-контейнером (display: inline-flex).

---

Кроме этого фреймворк Bootstrap 4 позволяет управлять CSS свойством display HTML элементов адаптивно. Это означает, что HTML элемент при одной ширине viewport может отображаться одним образом, а при другой – по-другому.

Синтаксис display-класса Bootstrap 4:

d{-breakpoint}-?

В данном классе нужно вместо:

• breakpoint указать название контрольной точки (sm, md, lg, xl), начиная с которой будет применяться указанное CSS свойство display к HTML элементу (без обозначения — начиная с самых крохотных устройств).
• ? задать одно из значений: none, inline, inline-block, block, table, table-cell, flex, inline-flex.

Список всех display-классов Bootstrap 4:

• d-none
• d-inline
• d-inline-block
• d-block
• d-table
• d-table-cell
• d-flex
• d-inline-flex
• d-sm-none
• d-sm-inline
• d-sm-inline-block
• d-sm-block
• d-sm-table
• d-sm-table-cell
• d-sm-flex
• d-sm-inline-flex
• d-md-none
• d-md-inline
• d-md-inline-block
• d-md-block
• d-md-table
• d-md-table-cell
• d-md-flex
• d-md-inline-flex
• d-lg-none
• d-lg-inline
• d-lg-inline-block
• d-lg-block
• d-lg-table
• d-lg-table-cell
• d-lg-flex
• d-lg-inline-flex
• d-xl-none
• d-xl-inline
• d-xl-inline-block
• d-xl-block
• d-xl-table
• d-xl-table-cell
• d-xl-flex
• d-xl-inline-flex

Примеры работы с display-классами

1.

Создадим адаптивную разметку, состоящую из 3 секций (L, M и R). Секция L должна отображаться только на контрольной точке xl, а на остальных – скрыта.

Bootstrap 4 — Пример адаптивной разметки блока

<div>
    <div>
        <div>L</div>
        <div>M</div>
        <div>R</div>
    </div>
</div>

2. Например, скроем некоторый HTML элемент на xs (крохотных устройствах), md и lg. На остальных контрольных точках (sm и xl) данный элемент будем отображать как блочный (display: block).

<div>
    ...
</div>

3. Например, рассмотрим, как можно осуществить скрытия элемента только на устройствах md.

<div>
    ...
</div>

Классы, управляющие видимостью элементов при печати

Во фреймворке Bootstrap 4 имеются классы, с помощью которых можно управлять видимостью элементов при печати.

Первые три класса из этого набора (d-print-block, d-print-inline, d-print-inline-block) предназначены для скрытия элемента в браузере и отображения его только при печати (как block, inline, inline-block).

Четвёртый класс d-print-none выполняет обратное действие, он оставляет элемент видимым в браузере и скрывает его при печати.

Класс	в браузере	при печати
d-print-block	скрыт	виден (как display: block)
d-print-inline	скрыт	виден (как display: inline)
d-print-inline-block	скрыт	виден (как display: inline-block)
d-print-none	виден	скрыт

Пример, в котором показано как можно с помощью вышепиведённых классов управлять видимостью элементов при печати:

<!-- элемент виден в браузере, но будет скрыт при печати -->
<nav>. ..</nav>

<!-- элемент будет отображаться при печати как блочный (в браузере данный элемент скрыт) -->
<div>...</div>

<!-- элемент будет отображаться при печати как строчный (в браузере данный элемент скрыт) -->
<div>...</div>

<!-- элемент будет отображаться при печати как строчно-блочный (в браузере данный элемент скрыт) -->
<div>...</div>

bootstrap 4 отзывчивые утилиты видимые/скрытые xs sm lg не работают

спросил 5 лет, 4 месяца назад

Изменено 1 год, 10 месяцев назад

Просмотрено 155 тысяч раз

Возникла проблема с новыми отзывчивыми утилитами скрытых/видимых классов при переходе на Начальная загрузка 4 . Я знаю, что классы .hidden- были удалены из версии 3 и заменены на .hidden-*-up .hidden-*-down . Использование новых классов .hidden-*-up.hidden-*-down , но элементы не меняются на видимые/скрытые. Не могу понять, почему.

 <дел>
    <диапазон>
        …