如何始终连续显示 3 张卡片答案

【问题标题】：How to always display 3 cards in row如何始终连续显示 3 张卡片
【发布时间】：2020-12-27 14:53:51
【问题描述】：

如何始终在 xs、sm、md、lg、xl 设备上连续显示 3 张卡？现在，当我最小化屏幕时，它会分成另一行。谢谢

function Cards() {
const [items, setItems] = useState([{}, {}, {}, {}, {}, {}]);
return (
    <div class="row row-cols-1  row-cols-md-3 ">
        {items.map((item, key) => (
            <div class="col mb-4">
                <Card className="nesto ">
                    <Card.Img variant="top" src="holder.js/100px160" />
                    <Card.Body>
                        <Card.Title>Card title</Card.Title>
                        <Card.Text>
                            This is a wider card with supporting text below
                            as a natural lead-in to additional content. This
                            content is a little bit longer.
                        </Card.Text>
                    </Card.Body>
                    <Card.Footer>
                        <small className="text-muted">
                            Last updated 3 mins ago
                        </small>
                    </Card.Footer>
                </Card>
            </div>
        ))}
    </div>
);

}

【问题讨论】：

标签： css reactjs bootstrap-4

【解决方案1】：

您可以使用 col-4 代替 col mb-4

function Cards() {
     const [items, setItems] = useState([{}, {}, {}, {}, {}, {}]);
     return (
    <div class="row row-cols-1  row-cols-md-3 ">
        {items.map((item, key) => (
            <div class="col mb-4">
                <Card className="nesto ">
                    <Card.Img variant="top" src="holder.js/100px160" />
                    <Card.Body>
                        <Card.Title>Card title</Card.Title>
                        <Card.Text>
                            This is a wider card with supporting text below
                            as a natural lead-in to additional content. This
                            content is a little bit longer.
                        </Card.Text>
                    </Card.Body>
                    <Card.Footer>
                        <small className="text-muted">
                            Last updated 3 mins ago
                        </small>
                    </Card.Footer>
                </Card>
            </div>
        ))}
    </div>
);

【讨论】：

请解释你的代码是做什么的以及它是怎么做的。
什么意思？

【解决方案2】：

你可以使用 React Bootstrap 网格系统

  <Container>
    <Row>
      <Col xs={4}>One of three columns</Col>
      <Col xs={4}>One of three columns</Col>
      <Col xs={4}>One of three columns</Col>
    </Row>
  </Container>

在容器内创建一行，该行中的每一列将占用该行的 4/12 (=1/3) 长度。由于我们指定了 xs={4}，因此该列在更大的屏幕尺寸上总是占 1/3。请参阅工作示例：https://codesandbox.io/s/react-bootstrap-grid-example-forked-g18st?file=/src/index.js。这里我把每一项映射到里面的一个元素上，三项之后它会自动转移到新的一行重复。

【讨论】：