какое свойство отображения класса применяется к div, если я добавлю Bootstrap class 'd-lg-block' и 'd-none'

Question

какое свойство отображения класса применяется к div, если я добавлю Bootstrap class 'd-lg-block' и 'd-none'.

<div class="d-lg-block d-none"> </div>

Answer 1

когда вы используете d-none, это устанавливается как display none, так что не делайте ничего на экране, но когда вы добавляете d-lg-block, блок будет отображаться только при большом размере экрана, все остальные размеры экрана все равно не будут отображаться, потому что вашего д-нет.

Answer 2

Последний класс имеет приоритет. Поэтому применяются противоречивые стили из d-none.

Answer 3

(не вопрос Angular)

Мой лучший совет для простых вещей, как это - особенно с CSS - попробуйте это в вашем браузере. Когда я пытаюсь это сделать, d-lg-block выигрывает.

Они оба !important, поэтому d-lg-block, вероятно, выигрывает из-за объявления после d-none.

EDIT :

Посмотрев исходный код Bootstrap, .d-lg-block объявляется позже, поэтому, когда ширина вашего экрана> = 992px, d-lg-block всегда побеждает.

Answer 4

Эти классы являются адаптивными (используют CSS медиазапросы), поэтому это зависит от ширины экрана. display:block применяется для ширины менее 992 пикселей, а display:none применяется для менее 992 пикселей

Демо https://codeply.com/p/MIJ92PUKXe