Bootstrap 4.3.1 стиль теряется на маленьких экранах

Question

В Bootstrap 4.3.1 стиль теряется на маленьких экранах.Это не было проблемой с 4.2.1.При ширине 576 пикселей и меньше кодировка разделительной полосы представляет собой обычный текст без нижней границы.Пользовательские CSS:

.divider-strip {
  min-height: 1px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: inline-block;
  position: relative;
  border-bottom: 1px #607d8b solid;
}

.divider-strip h4 {
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: none;
}

.strip-block {
  width: 100px;
  height: 3px;
  background: #607d8b;
  position: absolute;
  bottom: -2px;
  left: 0;
}

.block-title {
  width: 100%;
}

и HTML:

<div class="divider-strip block-title">
  <h4>Accordion 1</h4><span class="strip-block"></span></h4>
</div>

Answer 1

Медиа-тег в css используется для того, чтобы вы могли настроить свой стиль в зависимости от размера экрана устройства.Например:

body {
    background-color: red;
}

@media only screen and (max-width: 200px) {
  body {
    background-color: lightblue;
  }
}

Когда размер экрана меньше 200 пикселей, тело будет lightblue, а если оно больше 200 пикселей, оно будет красного цвета.Посмотрите на этот пример в jsfiddle .Вы можете посмотреть почти на каждом экранном устройстве здесь , здесь есть код с комментариями и почти каждое правило css.

Вы также можете использовать !important для переопределения правил начальной загрузки css, эта командазаставляет CSS использовать ваш код, например:

body {
    background-color: red!important;
}

Чтобы узнать больше о !important, посмотрите здесь