Точка останова на мобильном окне с bootstrap - PullRequest
Новая
       62

Точка останова на мобильном окне с bootstrap

0 голосов
/ 09 апреля 2020

Как добавить точку останова при просмотре содержимого HTML в небольшом окне (например, xs)? 

<br class="show-when-small-window">

Ответы [ 3 ]

1 голос
/ 09 апреля 2020

Использование Bootstrap -4 scss

.show-when-small-window{
    display: none;
    @include media-breakpoint-down(xs){
        display: inline;
    }
}

Pure CSS

.show-when-small-window{
    display: none;
}
@media (max-width: 575.98px){
    .show-when-small-window{
        display: inline;
    }
}

Использование утилиты Bootstrap -4 

<br class="show-when-small-window d-inline d-sm-none" />
<!-- or -->
<br class="show-when-small-window d-inline d-md-none" />
<!-- or -->
<br class="show-when-small-window d-inline d-lg-none" />
<!-- or -->
<br class="show-when-small-window d-inline d-xl-none" />

Примечание: <br /> будет отображаться inline.

1 голос
/ 10 апреля 2020

Чтобы показать элемент только на заданном интервале размеров экрана, вы можете объединить один класс .d- -нет с классом .d- - *, например .d-none .d-md -block .d-xl-none скрывает элемент для всех размеров экрана, кроме как на средних и больших устройствах. enter image description here

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

1 голос
/ 09 апреля 2020

Я не предлагаю этот хак, но использую запросы @media для достижения вашей цели. hi только для того, чтобы показать, что он работает или нет 

@media only screen and (max-width: 568px) {
  .show-when-small-window {
    display: none;
  }
}
<span class="show-when-small-window">
hi <br>
</span>

BOOTSTRAP

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<span class="d-none d-sm-block">
hi <br> hi
</span>

Дополнительная информация: https://getbootstrap.com/docs/4.4/utilities/display/

...