Блог

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

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

#css #bootstrap-4

#css #bootstrap-4

Вопрос:

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

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

Комментарии:

1. как вы хотите, чтобы они выглядели, когда вы вводите многострочную текстовую метку?

2. итак, после этого, как вы хотите видеть свою карту, предоставьте ее изображение

Ответ №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. ширина кнопки составляет 105 пикселей, поэтому нам пришлось переместить ее на 52,5 пикселя, чтобы кнопка стала центрированной
  2. Возможно, вы захотите поиграть с margin-bottom в соответствии с вашими точными требованиями — лучше всего попросить вашу команду по контенту иметь заголовки в пределах фиксированного количества символов