React-Bootstrap 基于断点的每行可变列数

Question

目前我有这个代码：

return(
<Container>
    {array.map(function(item, i) {
        if (i%4 == 0) {
            return(
                <Row key={i} xs="3" sm="4">
                {array.slice(i, i+4).map(function(item, i) {
                    return(
                    <Col key={i}>
                        <Card className={"card"}>
                            <Card.Body>
                            <Card.Text>{item.name}</Card.Text>
                            </Card.Body>
                        </Card>
                    </Col>);
                })}
                </Row>
            );
        }
    })}
</Container>);

为了提供一些背景信息 - 我将可变数量的数据从数据库中提取到数组中，并将它们显示为卡片。我正在使用 Container 将其显示在由 x 行和 y 列组成的网格中。但是，对于大于 xs 断点的任何屏幕，我想在每个 Row 中显示 4 项，因此 4 Cols 每行。一旦遇到 xs 断点，我想在每个 Row 中显示 3 项。但是，现在的功能并不像我预期的那样。考虑以下示例：

A B C D
E F G H

变成

A B C
D
E F G
H

而不是

A B C
D E F
G H

谁能告诉我在哪里或如何解决这个问题？在我通过文档和在线搜索中，我找不到任何具有类似用例的示例（或者我可能没有在搜索正确的术语）。任何帮助都会很棒，谢谢！

Answer 1

发生这种情况的原因可能是您正在使用 array.slice(i, i+4) 并且该函数一次获取 4 个元素。

您不妨试试 :

return(
  <Container>
    <Row key={i} xs="3" sm="4">
      {array.map(function(item, i) {
        return(
          <Col key={i}>
              <Card className={"card"}>
                  <Card.Body>
                  <Card.Text>{item.name}</Card.Text>
                  </Card.Body>
              </Card>
          </Col>
        );
        })}
    </Row>
  </Container>);

希望这会奏效（可能需要更多操作）。

React-Bootstrap 基于断点的每行可变列数

React-Bootstrap variable number of Cols per Row based on breakpoint

javascript

reactjs

react-bootstrap