如何仅更改 Bootstrap 网格中最后一列的样式

Question

所以我有一个 React 组件，它可以将数组映射到 react-bootstrap 列，就像这样

<Container fluid>
  <Row xs={1} md={props.title === 'big rules' ? 1 : 2} lg={props.title === 'big rules' ? 2 : 4}>
    {props.rules.map((rule, index) => (
      <Col key={index}>
        {rule}
      </Col>
    ))}
  </Row>
</Container>

我有一个 .sass 文件，它在右侧为每一列提供了一个边框，

.col {
 padding: 1rem;
 border-style: groove;
 border-top: none;
 border-bottom: none;
 border-left: none;
}

如果列数根据屏幕大小而变化，我该如何设置我的 css 以便忽略每行中的最后一列？

编辑：添加一些图像以希望更好地解释问题

此行按预期工作，因为只有 3 个项目映射到列中。

这一行添加了 12 个条目，直到最后一个条目的最后一列有边框。

Answer 1

这里是工作示例：

export default function App() {
  return (
    <div className="containere">
      <div className="row">
        {[1, 1, 1, 1, 1, 1].map((rule, index) => (
          <div className="col" key={index}>
            {rule}
          </div>
        ))}
      </div>
      <hr />
      <div className="row">
        {[1, 1, 1, 1, 1, 1].map((rule, index) => (
          <div className="col" key={index}>
            {rule}
          </div>
        ))}
      </div>
      <hr />
      <div className="row">
        {[1, 1, 1, 1, 1, 1].map((rule, index) => (
          <div className="col" key={index}>
            {rule}
          </div>
        ))}
      </div>
    </div>
  );
}
 

scss:

.container {
 
}

.row {
  display: flex;
}

.col {
  padding: 1rem;
  border-style: groove;
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid black;
  &:last-child {
    border-right: none;
  }
}

刚刚在该 .col 类上添加了 &:last-child {} 选择器