Hidden bootstrap не работает

Не работает «hidden» в bootstrap 4

Не скрывает элементы в bootstrap 4, при подключении bootstrap 3 все работает хорошо

2 ответа 2

В beta версии в очередной раз все переиграли и теперь группа классов имеет вид:

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

Классы hidden-* и visible-* в бета-версии Bootstrap 4 удалены. Если вы хотите скрыть элемент на определенных уровнях или контрольных точках в Bootstrap 4, используйте классы отображения d- * .

• hidden-xs-down = d-none d-sm-block
• hidden-sm-down = d-none d-md-block
• hidden-md-down = d-none d-lg-block
• hidden-lg-down = d-none d-xl-block
• hidden-xl-down = d-none (same as hidden)
• hidden-xs-up = d-none (same as hidden)
• hidden-sm-up = d-sm-none
• hidden-md-up = d-md-none
• hidden-lg-up = d-lg-none
• hidden-xl-up = d-xl-none
• hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down )
• hidden-sm (only) = d-block d-sm-none d-md-block
• hidden-md (only) = d-block d-md-none d-lg-block
• hidden-lg (only) = d-block d-lg-none d-xl-block
• hidden-xl (only) = d-block d-xl-none
• visible-xs (only) = d-block d-sm-none
• visible-sm (only) = d-none d-sm-block d-md-none
• visible-md (only) = d-none d-md-block d-lg-none
• visible-lg (only) = d-none d-lg-block d-xl-none
• visible-xl (only) = d-none d-xl-block

Источник

Bootstrap 4: Как спрятать блок на маленьких экранах?

Made display utilities responsive (e.g., .d-none and d--none).
Dropped the bulk of .hidden-* utilities for new [display utilities]((/docs/4.0/utilities/display/). For example, instead of .hidden-sm-up, use .d-sm-none. Renamed the .hidden-print utilities to use the display utility naming scheme. More info under the Responsive utilities section of this page.
Added .float-— classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.

В bootstrap4 есть классы d-block и d-none — вот вокруг них и строится скрытие блоков.

Я приведу несколько примеров, чтобы было понятно:

1) Чтобы скрыть блок только на sm используйте связку классов d-sm-none d-md-block — т.е вы явно скрываете блок на sm и делаете его видимым на md и выше (на xs блок так же будет виден)
2) Чтобы скрыть блок на xs используйте связку классов d-none d-sm-block — блок будет скрыт на xs и виден на всех остальных размерах

А вот всякие hidden-md-up и hidden-md-up , не смотря на кажущуюся удобность, были выпилены из бутстрапа4 после альфы.

Источник

Missing visible-** and hidden-** in Bootstrap v4

In Bootstrap v3 I often use the hidden-** classes combined with clearfix to control multi column layouts at different screen widths. For example,

I could combine multiple hidden-** in one DIV to make my multi columns appear correctly at different screen widths.

As an example if I wanted to display rows of product photos, 4 per row on larger screen sizes, 3 on smaller screens, then 2 on very small screens. The product photos might be different heights so I need the clearfix to ensure the row breaks properly.

Here’s an example in v3.

Now that v4 has done away with these classes, and replaced them with the visible/hidden-**-up/down classes I seem to have to do the same thing with multiple DIVs instead.

Here’s a similar example in v4.

So I’ve gone from single DIVs to having to add multiple DIVs with lots of up/down classes to achieve the same thing.

Is there a better way of doing this in v4 that I have overlooked?

11 Answers 11

Update for Bootstrap 5 (2020)

Bootstrap 5 (currently alpha) has a new xxl breakpoint. Therefore display classes have a new tier to support this:

Hidden only on xxl: d-xxl-none
Visible only on xxl: d-none d-xxl-block

Bootstrap 4 (2018)

The hidden-* and visible-* classes no longer exist in Bootstrap 4. If you want to hide an element on specific tiers or breakpoints in Bootstrap 4, use the d-* display classes accordingly.

Remember that extra-small/mobile (formerly xs ) is the default (implied) breakpoint, unless overridden by a larger breakpoint. Therefore, the -xs infix no longer exists in Bootstrap 4.

Show/hide for breakpoint and down:

• hidden-xs-down (hidden-xs) = d-none d-sm-block
• hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
• hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block
• hidden-lg-down = d-none d-xl-block
• hidden-xl-down (n/a 3.x) = d-none (same as hidden )

Show/hide for breakpoint and up:

• hidden-xs-up = d-none (same as hidden )
• hidden-sm-up = d-sm-none
• hidden-md-up = d-md-none
• hidden-lg-up = d-lg-none
• hidden-xl-up (n/a 3.x) = d-xl-none

Show/hide only for a single breakpoint:

• hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down )
• hidden-sm (only) = d-block d-sm-none d-md-block
• hidden-md (only) = d-block d-md-none d-lg-block
• hidden-lg (only) = d-block d-lg-none d-xl-block
• hidden-xl (n/a 3.x) = d-block d-xl-none
• visible-xs (only) = d-block d-sm-none
• visible-sm (only) = d-none d-sm-block d-md-none
• visible-md (only) = d-none d-md-block d-lg-none
• visible-lg (only) = d-none d-lg-block d-xl-none
• visible-xl (n/a 3.x) = d-none d-xl-block

Also, note that d-*-block can be replaced with d-*-inline , d-*-flex , d-*-table-cell , d-*-table etc.. depending on the display type of the element. Read more on the display classes

Источник

Отображение элементов

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

Как это устроено

Изменяйте значение свойства display с помощью наших обычных отзывчивых классов отображения. Мы намеренно поддерживаем только поднабор всех возможных значений свойства display . Классы можно комбинировать для создания различных эффектов, как вам надо.

Обозначение

Классы отображения, которые подходят всем брейкпойнтам, от xs до xl , не имеют в своем названии аббревиатуры брейкпойнта, т.к. эти классы применяются, начиная от min-width: 0; и выше, и т.о., не «связаны» медиа-запросами. Оставшиеся брейкпойнты, однако, включают подобные аббревиатуры брейкпойнта.

Поэтому классы называются по формату:

Где значение – это одно из:

Медиа-запросы влияют на ширину экрана, начиная с указаннного брейкпонта или больше. Например, .d-lg-none задает display: none; на обоих lg и xl .

Примеры

Скрытие элементов

Для быстрой мобил-френдли веб-разработки используйте отзывчивые классы для показа и скрытия элементов на устройстве. Избегайте создания совершенно разных версий сайта, вместо того, чтобы просто «отзывчиво» прятать элемент для каждого размера экрана.

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

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

Размер экрана	Класс
Скрыт на всех	.d-none
Скрыт только на xs	.d-none .d-sm-block
Скрыт только на sm	.d-sm-none .d-md-block
Скрыт только на md	.d-md-none .d-lg-block
Скрыт только на lg	.d-lg-none .d-xl-block
Скрыт только на xl	.d-xl-none
Виден на всех	.d-block
Виден только на xs	.d-block .d-sm-none
Виден только на 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-block

Отображение при печати

Измените атрибут display элементов при печати с помощью наших классов. Сюда входит поддержка таких же значений display , как в наших отзывчивых классах .d-* .

• .d-print-none
• .d-print-inline
• .d-print-inline-block
• .d-print-block
• .d-print-table
• .d-print-table-row
• .d-print-table-cell
• .d-print-flex
• .d-print-inline-flex

Классы печати и отображения можно сочетать.

Источник

Bootstrap 4 .modal (‘hide’) не работает

Я создаю действительно простой, но немного подправленный модал для показа iFrame. Я открываю модель с помощью функции javascript и функции модального вызова, предоставляемой загрузчиком. В моем модале я поместил значок для закрытия модального. Если я нажму на эту иконку закрытия, модал не скроется. Я использую javascript onclick с функциями .modal(‘show’) и .modal(‘hide’) , предоставляемыми загрузчиком. Модал не скрывается, но мой консольный журнал запущен.

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

Открыть ссылку для модальных

Моя главная проблема в том, что мой модал появляется, также запускает console.log как для показа, так и для скрытия, но после нажатия на кнопку закрытия модал не скрывается.

3 ответа

Похоже, вам нужен div modal-dialog внутри вашего модала, чтобы .modal(‘hide’) или data-dismiss=»modal» работали.

Я решил вашу проблему, изменив класс body-modal на modal-dialog . ( изменил значок закрытия на красный, чтобы его было легче увидеть во фрагменте )

Но сейчас модал немного грязный (визуально).

Я бы рекомендовал вам проверить модальные документы. Благодаря включенным функциям Bootstrap 4 вы, вероятно, удалите большую часть своих дополнительных (встроенных) CSS и JS и таким образом убедитесь, что все работает хорошо в большинстве браузеров.

Если вы удалите класс fade , он будет работать нормально.

Я думаю, что вам нужен div modal-dialog , если вы собираетесь использовать класс fade . Кроме того, используйте только один тип закрывающих / открывающих модалов, либо путь js, либо data-toggle/data-dismiss .

Вы можете использовать data-dismiss = «modal» для закрытия модального

Источник