Bootstrap 4正在破坏Stripe Elements。

Question

我正在尝试将Stripe与我的Laravel网站集成

为了实现这一目标，我正在遵循他们网站上的文档

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

我可以正常工作，但是Bootstrap 4中的某些内容会影响样式。如果我将依赖项降级到Bootstrap 4之前的版本，则可以正常工作。

这是使用Bootstrap 4时的样子：

而这是应该的样子，使用Bootstrap 3运行：

我可以帮你进行翻译。这段文本的意思是：“我已经创建了两个Bootply示例来演示这个问题。”

“Broken Example”意思是“错误的示例”。

https://www.bootply.com/Tqz93y47Qe

工作示例

https://www.bootply.com/EvYkmKUPM3

有没有办法让Stripe忽略Bootstrap样式？

- JaChNo

Answer 1

使用 flex-column 类与 form-row 一起使用

https://www.bootply.com/t8jij8fQOp

form-row 默认使用 display:flex 和 flex-direction: row。使用 flex-column 类将其更改为 flex-direction: column

或者

在 card-element 上使用 w-100 类。它会给该元素设置100%的宽度

更新的 bootply

- Nandita Sharma

---

你好，欢迎！ :) - Nandita Sharma

救命稻草！你怎么找到的？Stripe内容如此嵌套（甚至在iframe中），我使用DevTools调试它没有任何运气。 - Greg Bell

@GregBell 谢谢，如果这个回答对您有帮助，请点赞 :) - Nandita Sharma

该死！你节省了我的时间！ - miltonbhowmick

Answer 2

你只需要移除 "form-row" 类，使用 "d-block" 类即可。"form-row" 是 Bootstrap-4 的默认类，所以会导致混乱。

希望这对你有所帮助。

- uday kyada

Answer 3

我有同样的问题，但解决方法是删除 form-row 类并使用 flex-column，在带有 id card-element 的 div 中添加类 w-100

- daniel0318

Answer 4

我试图将Stripe支付与基于Bootstrap和Create React的Web应用程序集成，但这些解决方案都没有起作用。官方文档建议使用以下代码：

function CardSection() {
  return (
    <label>
      Card details
      <CardElement options={CARD_ELEMENT_OPTIONS} />
    </label>
  );
};

这段代码导致我输入框被压缩，无法响应Bootstrap实用类，如.w-100或.container。然而，将CardElement组件移动到上面的<label>之外可以解决这个问题：

function CardSection() {
  return (
    <>
      <label>Card details</label>
      <CardElement options={CARD_ELEMENT_OPTIONS} />
    </>
  );
}

- David Biggs