Bootstrap 4打破了Stripe Elements [英] Bootstrap 4 is breaking Stripe Elements
问题描述
我正在尝试将Stripe与我的Laravel网站集成
I am trying to integrate Stripe with my Laravel site
为此，我将遵循他们网站上的文档
in order to do this I am following the documentation on their website
https://stripe.com/docs/stripe-js/elements/quickstart
我可以正常工作，但是引导程序4中的某些内容正在影响样式.如果我将依赖关系放到bootstrap 4之前的版本中，它将起作用.
I can get to work with no errors, but something in bootstrap 4 is affecting the styling. If I drop the dependancy to a pre bootstrap 4 version it works.
这是Bootstrap 4的样子
This is what it looks like with bootstrap 4
这应该是这样，并且正在使用bootstrap 3
and this is what is should look like and this is running with bootstrap 3
我创建了两个bootply示例来说明问题
I have created two bootply examples to demostrate the issue
残破的示例
https://www.bootply.com/Tqz93y47Qe
工作示例
https://www.bootply.com/EvYkmKUPM3
有没有办法让条纹忽略引导样式?
Is there away to get stripe to ignore the bootstrap styling?
推荐答案
在form-row
https://www.bootply.com/t8jij8fQOp
form-row是默认显示的flex和flex-direction行.使用flex-column类
form-row is display flex and flex-direction row by default. Change it to flex-direction column using flex-column class
OR
在card-element上使用 w-100 类.它将为该元素提供100％的宽度
Use w-100 class on card-element. It will give 100% width to that element
更新了启动
这篇关于Bootstrap 4打破了Stripe Elements的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
