Css 如何使用React引导映射行中的（）项

我正在用React引导库开发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;

---

您可以将列表包装在一个容器和一行中。每个项目将是一个列项目，xs属性为4，因此一行中仅显示3个项目，每行12列/每张卡4列=每行3张卡。这是一个。

您可以将列表包装在一个容器和一行中。每个项目将是一个列项目，xs属性为4，因此一行中仅显示3个项目，每行12列/每张卡4列=每行3张卡。这是一个。

您可以编写一个代码沙盒来重现这个问题吗？您的三元运算符不起作用，因为您正在比较两个对象。光线是对象，属于非基本类型。每个对象都有自己的内存位置，因此在比较它们时，基本上是在检查它们是否具有相同的内存位置，这是不可能的。更多的是关于这个话题。关于另一个问题，如果你能提供一个活生生的例子，那就太好了。首先，非常感谢你的回答。我试着添加一个实例来更清楚地说明这一点。快拿着它回来。感谢您对十进制运算符的关注：this.props.filteredResults===[]尝试这样编写：this.props.filteredResults.length==0您是否可以编写一个代码沙盒来重现此问题？您的三进制运算符不起作用，因为您正在比较两个对象光线是对象，它们是非基本类型。每个对象都有自己的内存位置，因此在比较它们时，基本上是在检查它们是否具有相同的内存位置，这是不可能的。更多的是关于这个话题。关于另一个问题，如果你能提供一个活生生的例子，那就太好了。首先，非常感谢你的回答。我试着添加一个实例来更清楚地说明这一点。快拿着它回来。谢谢你的十进制运算符：this.props.filteredResults===[]试着这样写：this.props.filteredResults.length==0谢谢你，这像个符咒一样解决了我的问题！我很明白为什么。谢谢。现在，在我附加的css中，只有元素：不能用.card_img{width:150px；}更改。图像大小不变，现在我解决了行问题。如果你对此有任何想法，我想：谢谢你所做的一切，太好了。那么你能接受这个答案吗？关于宽度问题：您不能像这样设置大小，因为Col元素现在设置大小使它们适合一行中的项目。你可以用！这对你的情况很重要，但你会注意你的反应能力。还有一个填充或边距道具，您应该使用它。阅读此文了解更多信息：谢谢你，这像魅力一样解决了我的问题！我很明白为什么。谢谢。现在，在我附加的css中，只有元素：不能用.card_img{width:150px；}更改。图像大小不变，现在我解决了行问题。如果你对此有任何想法，我想：谢谢你所做的一切，太好了。那么你能接受这个答案吗？关于宽度问题：您不能像这样设置大小，因为Col元素现在设置大小使它们适合一行中的项目。你可以用！这对你的情况很重要，但你会注意你的反应能力。还有一个填充或边距道具，您应该使用它。有关更多信息，请阅读：