css - 如何使用 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

您可以将列表包装在容器和行中。每个元素都是一个 Col 元素，xs 属性为 4，因此一行中只会显示 3 个元素(每行 12 列/每张卡片 4 列 = 每行 3 张卡片)。这是一个codepen .