Bootstrap 4 - скрыть на xs и sm не работает
Я создаю представление xs для своего приложения, и моя проблема в том, что когда я хочу скрыть один div на маленьких и очень маленьких устройствах, этот дополнительный маленький размер не работает, я следовал документации начальной загрузки 4, и я не знаю, почему это не работает.
<div class = "headers">
<div class = "row">
<div class = "col-lg-6 col-md-4 col-sm-5">Produkt</div>
<div class = "col-2 d-sm-none d-md-block d-flex justify-content-start">Cena</div>
<div class = "col-lg-2 col-md-3 col-sm-4 d-flex justify-content-center">Ilość</div>
<div class = "col-lg-2 col-sm-3 d-flex justify-content-end">Wartość</div>
</div>
</div>
Я хочу поставить второй div:
d-none d-md-block
Показать, когда экран находится в режиме MD. Когда я устанавливаю это на sm и xs, не скрывается. Когда я добавляю в эту строку только d-sm-none, он работает хорошо, но не на xs.
https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
Ответы 2
Это потому, что d-flex отменяет это. Вы должны сделать это вместо этого ...
d-none d-md-flex
<div class = "container">
<div class = "row">
<div class = "col-lg-6 col-md-4 col-sm-5">Produkt</div>
<div class = "col-2 d-none d-md-flex justify-content-start">Cena</div>
<div class = "col-lg-2 col-md-3 col-sm-4 d-flex justify-content-center">Ilość</div>
<div class = "col-lg-2 col-sm-3 d-flex justify-content-end">Wartość</div>
</div>
</div>
https://www.codeply.com/go/XUSWoSdFcP
Связанный:
Отсутствует видимый - ** и скрытый - ** в Bootstrap v4
Для Bootstrap 4.0 и выше:
Документация: https://getbootstrap.com/docs/4.3/utilities/display/
Дополнительная информация:
- Скрыт только для экрана размером sm и меньше (например, xs) или же Виден только для экрана размером md и больше (например, lg): d-none d-md-block
- Виден только для экрана размером sm и меньше (например, xs) или же Скрыт только для размера экрана md и больше (например, lg): d-блок d-md-none