Дочерние элементы Bootstrap Carousel не будут отображать отзывчивые поля или отступы

Question

Я хочу получить элемент карусели-подписи в карусели Bootstrap, чтобы позволить перемещать элементы в нем в стандартных точках прерывания Bootstrap (sm, md, lg, xl).

В настоящее время, независимо от того, что я делаю при добавлении класса (например, pb-lg-5) к элементу carousel-caption или любому из его дочерних элементов (например, <h2> или <p> элементов), будет использоваться только одно значение,Задание отступов для всех четырех точек останова не будет работать.Если я установлю, скажем, заполнение для элемента <h2> как «pb-sm-2 pb-md-4 pb-lg-5 pb-xl-1», будет работать только одно значение, и ни одно из остальных не будет отображаться правильно,

Ниже приведен мой рабочий пример.

http://codepen.io/stripeycat/pen/WavdXQ

<div class="carousel-caption text-left">
   <div>
      <h2 class="mb-sm-1 mb-md-4 mb-lg-3 mb-xl-5">Headline Text</h2>
      <p>Paragraph Text</p>
   <div>
</div>

Является ли это причиной проблемы с позиционированием внутри карусели?Или я что-то упустил полностью?

Answer 1

Я выделил проблему;Поскольку я написал дополнительные классы Spacing в стиле Bootstrap в свой дополнительный пользовательский документ CSS, я считаю, что на них не ссылались правильно в отношении каскада.форма существующего CSS), браузер теперь корректно привлекает мои дополнительные стили.

Answer 2

1) почему pb-xl-1 в pb-sm-2 pb-md-4 pb-lg-5 pb-xl-1?кажется не логичным «для самого широкого экрана - наименьшее заполнение»;следующий ваш образец тот же непонятный "mb-sm-1 mb-md-4 mb-lg-3 mb-xl-5", почему бы не mb-md-3 mb-lg-4?

2) следует использовать только одно значение отступа из последовательности, это зависит от размера экрана;это очень ясно для последовательностей естественного выращивания, таких как pb-sm-2 pb-md-3 pb-lg-4 pb-xl-5 - https://codepen.io/rpokrovskij/pen/NOqzEX отступы при каждом изменении размера экрана.

3), как я понимаю, ваш случай - здесь нет ничего конкретного для карусели