Нарушение горизонтального выравнивания кнопки bootstrap4 из-за добавления дополнительного текста в верхнюю часть?

Question

Я создал макет систем сетки в bootstrap, чтобы продемонстрировать свои 3 курса в том, что я показал изображение курса сверху в заголовке среднего курса и в нижней кнопке регистрации курса, в том, что всякий раз, когда я собираюсь вставить многострочный заголовок для конкретного текста, кнопка всех курсов не будет иметь одинаковую горизонтальную высоту, что означает, что их выравнивание нарушено

Вы можете обратиться к разделу «ВЫДЕЛЕННЫЕ КУРСЫ» в http://demo.proserindustries.com/

Answer 1

Добавьте эти 2 свойства в свой CSS, чтобы выровнять все кнопки

.mb-5 .btn-secondary { bottom: -12%; position: absolute; left: -webkit-calc(50% - 52.5px); left: -moz-calc(50% - 52.5px); left: calc(50% - 52.5px); }
.mb-5, .my-5 { margin-bottom: 7rem!important; }

Объяснение

1. ширина кнопки равна 105px, поэтому нам пришлось переместить ее на 52.5px, чтобы кнопка стала центрированной
2. Возможно, вы захотите поиграть с margin-bottom в соответствии с вашими точными требованиями. Лучше всего попросить команду по контенту иметь заголовки с фиксированным числом символов