Bootstrap 4 ломает полосу элементов

Question

Я пытаюсь интегрировать Stripe с моим сайтом Laravel

, чтобы сделать это, я следую документации на их сайте

https://stripe.com/docs/stripe-js/elements/quickstart

Я могу получитьработать без ошибок, но что-то в начальной загрузке 4 влияет на стиль.Если я отбрасываю зависимость до версии, предшествующей начальной загрузке 4, она работает.

Вот как это выглядит с начальной загрузкой 4

, и это то, что должнопохоже, и это выполняется с начальной загрузкой 3

Я создал два примера bootply для демонстрации проблемы

Broken Example

https://www.bootply.com/Tqz93y47Qe

Рабочий пример

https://www.bootply.com/EvYkmKUPM3

Есть ли где-нибудь полоса, чтобы игнорировать стиль начальной загрузки?

Answer 1

Вы должны просто удалить класс "form-row".используйте там класс "d-block"."form-row" - класс по умолчанию для bootstrap-4, поэтому он испортился.

Надеюсь, это будет полезно.

Answer 2

У меня та же проблема, но она решена, удалите form-row class и используйте flex-column и в div с id card-element добавьте класс w-100

Answer 3

Использовать flex-column класс с form-row

https://www.bootply.com/t8jij8fQOp

form-row по умолчанию отображать строки flex и flex-direction.Измените его на столбец с гибким направлением, используя flex-column class

ИЛИ

Используйте w-100 class на card-element.Это даст 100% ширину этому элементу

Обновлено bootply