如何使用 React-Bootstrap 在行中映射（）项目

Question

我正在使用 React-Bootstrap 库开发一个 React 应用程序。我显示了一个 ShopResume 组件，该组件在内部的地图函数中呈现 CardGroup 元素，以将我的数据映射到我的 CardGroup 中的每张卡片上。

我想按行最多显示 3 张卡片。但我所有的改变似乎都不起作用。有人可以帮我解决吗？

现在，我所有的卡片都只显示在一行中。当我的渲染已经在一行上显示 2 个项目时，我想创建新行。

奖励问题：即使条件为真，我的三元运算符也不显示它应该显示的内容。如果有任何想法可能会出现。我将不胜感激。

非常感谢您一如既往的帮助和宝贵的回答

class ShopResume extends Component {
  state = {};
  render() {

    return (
      <React.Fragment>
 {(this.props.filteredResults === [""]) ? "Aucun Résultat" : 

    ( <CardGroup className="card_container">
      {this.props.filteredResults.map((detail, index) => {
        return (
          <Card className="card_item" key={index}>
            <Card.Img variant="top" src={detail.imgURL} id="card_img" />
            <Card.Body>
              <Card.Title className="shopTitle">{detail.nom}</Card.Title>
              <Card.Text>{detail.resume}</Card.Text>
              <Button variant="primary" onClick={this.props.filterClick}>Détails</Button>


              <ListGroup className="list-group-flush">
                <ListGroupItem>
                  {detail.startPrice === "" ? "Sur devis" : 'A partir de ' + detail.startPrice + ' €'}
                </ListGroupItem>

              </ListGroup>
            </Card.Body>
          </Card>

        );
      })}
    </CardGroup>)}
    </React.Fragment>
    );
  }
}
export default ShopResume;

Answer 1

您可以将列表包装在 Container 和 Row 中。每个项目将是一个 Col 项目，其 xs 属性为 4，因此一行中只会显示 3 个项目（每行 12 列/每张卡片 4 列 = 每行 3 张卡片）。这是一个代码笔。