0

我将 React 与 React Boostrap 一起使用，我试图弄清楚如何将三张卡片放在三列上，并在每次达到三张卡片时添加一个新行。我似乎无法理解如何打印出新的 Row 标签。据我了解，我无法以一种好的方式将条件包裹在 and 标签周围。我怎么能接近这个？

                 {items &&
                    items.map((item, index) =>
                    <Row>
                        <Col>
                            <Card style={{ width: '18rem' }}>
                            <Card.Img variant="top" src={item.logo}/>
                            <Card.Body>
                                <Card.Title>Card Title</Card.Title>
                                <Card.Text>
                                Some quick example text to build on the card title and make up the bulk of
                                the card's content.
                                </Card.Text>
                                <Button variant="primary">Go somewhere</Button>
                            </Card.Body>
                            </Card>
                        </Col>
                    </Row>
                    )
                    }
4

2 回答 2

1

display: 'grid'使用and可以更快、更干净地完成它 gridTemplateColumns:'1fr 1fr 1fr'。

你必须将父级设置display为grid并grid-template-columns设置为1fr 1fr 1fr你将有一个表，每个表都有父级的 1 部分。

您的代码将如下所示：

<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr' }} >
    {items && items.map((item, index) =>
        <Card style={{ width: '18rem' }}>
            <Card.Img variant="top" src={item.logo} />
            <Card.Body>
                <Card.Title>Card Title</Card.Title>
                <Card.Text>
                    Some quick example text to build on the card title and make up the bulk of
                    the card's content.
                                    </Card.Text>
                <Button variant="primary">Go somewhere</Button>
            </Card.Body>
        </Card>
    )}
</div>

更多关于网格的信息在这里！

于 2021-04-11T18:39:10.020 回答
1

您可以使用 Bootstrap 网格执行类似的操作。

通过在每行中放置 3 列，引导网格将在第三列之后的每个新列中打破该列。

<Row>
  {items &&
    items.map((item, index) =>
        <Col md="4"> // 12 / 4 = 3 columns per row
          <Card>
            <Card.Img variant="top" src={item.logo}/>
            <Card.Body>
              <Card.Title>Card Title</Card.Title>
                <Card.Text>
                  Some quick example text to build on the card title
                  and make up the bulk of the card's content.
                </Card.Text>
                <Button variant="primary">Go somewhere</Button>
              </Card.Body>
          </Card>
        </Col>
    )
  }
</Row>
于 2021-04-11T18:45:04.893 回答