Question

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

为此，我正在关注他们网站上的文档

我可以正常工作，但是引导程序4中的某些内容正在影响样式。如果我将依赖关系放到bootstrap 4之前的版本中，它将起作用。

这是Bootstrap 4的样子

这应该是这样，并且正在使用bootstrap 3

运行

我创建了两个bootply示例来说明问题

残破的示例

工作示例

有没有办法让条纹忽略引导样式？

Answer 1

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

form-row是默认显示柔性行和柔性方向行。使用flex-column类将其更改为弹性方向列

OR

在card-element上使用 w-100 类。它将为该元素提供100％的宽度

更新了bootply

Answer 2

您只需要删除“ form-row”类。使用“ d-block”类。 “ form-row”是bootstrap-4的默认类，这就是为什么它弄乱了。

我希望这会有所帮助。

Answer 3

我也遇到了同样的问题，但解决了它删除了form-row类并使用flex-column并在ID为card-element的div中添加了类w-100

Answer 4

我试图将Stripe付款与bootstrap + create react Web应用程序集成在一起，但是这些解决方案不起作用。官方文档规定了以下代码：

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

此代码为我造成了一个压缩的输入框，该输入框无法响应诸如.w-100或.container之类的引导实用程序类。但是，将CardElement组件移到上述<label>之外可以解决此问题：

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