React-bootstrap 表单复选框剪裁成文本

Question

我正在使用 react-bootstrap 表单组件创建一个表单，并希望将复选框作为字段之一，但它看起来像这样：

导致这个的代码非常简单：

  <Form.Group className="mb-3" controlId="formBasicCheckbox">
     <Form.Check type="checkbox" label="I agree to the terms and conditions" />
  </Form.Group>

我确定我可以使用一些 css 技巧来修复它，但它不应该这样做。有什么解决办法吗？

Answer 1

我想通了：另一个 css 文件在所有输入元素上设置 margin: 0 auto !important;（一个很好的例子说明为什么 !important 是危险的）。

Bootstrap 试图将复选框边距设置为向左移动，但是 css 被其他文件覆盖了。我将有问题的 css 更改为使用 class 选择器，现在可以使用了！

对于遇到类似问题的任何人，我的解决方法是：

检查了 css 开发人员工具中的复选框
看到有些字段（即margin）被划掉了
已过滤 margin
注意到这些实例来自 css 文件

React-bootstrap 表单复选框剪裁成文本

React-bootstrap form checkbox clipping into text

css

reactjs

react-bootstrap