html - 如何使连续的外部组件具有更大的边距

Question

我有一排 reactstrap 卡，我希望左边的那个有 2rem 的左边距，右边的那个有 2rem 的右边距。所有其他边距应为 1rem。

然而，这些卡片是作为一个单独的组件实现的，所以我不能硬编码边距，因为它们都被父组件使用。有没有我可以传递的道具说根据位置改变边距？

同样复杂的是，一排卡片的数量会根据屏幕大小而变化，所以我不能只说“如果它是 x 的倍数，那就有这种风格”。

这是组件：

<Card
    outline
    as='a'
    style={{ cursor: 'pointer', margin: '1rem' }}
  >
    <CardImg top width='100%' src={img}' />
    <CardBody>
      <CardTitle tag='h5'>{this.props.title}</CardTitle>
    </CardBody>
  </Card>

标签： htmlcssreactjs

Answer 1

在父节点上，对第一个子节点和最后一个子节点使用 CSS 选择器。

https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child

https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child