React Bootstrap卡片出现重叠，如何为卡片添加间距？

我看了你的代码，马上就发现几个导致卡片没间距、甚至重叠的小问题，咱们一步步来修复：

问题1：给Card加了固定宽度，和Bootstrap栅格冲突 #

你给每个<Card>都加了style={{ width: '18rem' }}，但你已经用了Bootstrap的Col lg="3" md="6"来分配布局（大屏每行4张，中屏每行2张），Col已经会给卡片分配合适的宽度，固定宽度会导致卡片在Col容器里“撑不开”或者“挤不下”，直接把这个固定宽度删掉就行。

问题2：没给卡片加间距，也没利用Bootstrap内置的间距工具 #

Bootstrap自带了一套现成的间距类，直接给Card加个margin类就能快速加间距，比如m-2（给卡片四周加0.5rem的间距），或者my-3 mx-2（上下加1rem，左右加0.5rem），根据你想要的间距大小调整就行。

问题3：自定义的.row样式和Bootstrap默认样式冲突 #

你在App.css里给.row写了display: flex和flex-wrap: wrap，但Bootstrap的.row类本身已经自带这两个属性了，而且Bootstrap的row还通过负margin来实现Col之间的默认间距，你自定义的样式可能破坏了这个逻辑。把App.css里的.row改成只保留你需要的自定义样式：

.row {
  max-width: 1320px;
  margin: auto;
}

修复后的卡片代码示例 #

改完之后的Card部分代码大概是这样：

<Col lg="3" md="6">
  <Card className="m-2">
    <Card.Body>
      <Card.Title>Card Title</Card.Title>
      <Card.Text>
        Some quick example text to build on the card title and make up the bulk of the card's content.
      </Card.Text>
      <Button variant="primary">Go somewhere</Button>
    </Card.Body>
  </Card>
</Col>

这样改完之后，卡片就会按照栅格系统自动排列，而且四周有合适的间距，不会再重叠啦。如果还想调整间距大小，直接把m-2换成m-3或者其他Bootstrap间距类就行，不用自己写复杂的CSS。

内容来源于stack exchange