条带元素和Bootstrap 4.1 CSS冲突

Question

正如标题所述，Bootstrap 4.1和Stripe的元素api之间似乎存在css冲突。我一直在努力寻找对此事的确认以及可能的解决方法，但无济于事。

下面是重新创建此问题的源代码，还有一些生动的示例。有没有人看过/知道解决方案？

Fiddle without including bootstrap 4.1

Fiddle WITH bootstrap 4.1

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 1

此CSS将对其进行修复：

.form-row {
    display: inherit;
}

引导程序将其设置为display: flex。

选中此fiddle。

Answer 2

请勿使用类form-row，因为Bootstrap的样式与Stripe期望的样式不同。命名任何不同。如果您按照facechomp的建议更改样式，那么当Bootstrap期望display: flex时，您可能还会遇到其他问题。