如何自动按行和列排列卡片？答案

【问题标题】：How to automatically arrange cards in rows and columns?如何自动按行和列排列卡片？
【发布时间】：2020-01-18 17:23:52
【问题描述】：

我正在尝试使用 react-bootstrap 在 ReactJS 中创建交互式用户界面。我正在使用卡片和 CardGroup。我需要一种自动将卡片排列在新行中的方法。每行三张卡片，如果超过三张，为第四张卡片创建一个新行。


    import React, { Component } from 'react';
    import {Card,CardGroup} from 'react-bootstrap';
    import {Button} from 'react-bootstrap';
    const Items = ({items}) => {
      return (
    <>
    <container>
    <row>
    <CardGroup>
        {items.map((item) => (
          <Card style={{ width: '18rem' }}>

      <Card.Body>
        <Card.Title>{item.NOME}</Card.Title>
        <Card.Subtitle className="mb-2 text-muted">{item.CATEGORIA}</Card.Subtitle>
        <Card.Text>
        {item.DESCRICAO}
        </Card.Text>
        <Card.Link href="#">Card Link</Card.Link>
        <Card.Link href="#">Another Link</Card.Link>
      </Card.Body>
    </Card>
          ))}
        </CardGroup>
        </row>
        </container>
    </>
        )
    };

    export default Items

【问题讨论】：

你能分享你目前的代码吗？
已更新代码。
这将帮助您找到正确的方法：stackoverflow.com/questions/42391499/…

标签： reactjs react-bootstrap

【解决方案1】：

您可以创建一个包含 3 张卡片组的数组，然后对其进行迭代：

const arr = var x = arr.reduce((item, key, index) => (index % 3 == 0 ? item.push([key]) : item[item.length-1].push(key)) && item, []);

const Items = ({items}) => (
  <>
    <container>
      {arr.map(group => (
        <row>
          <CardGroup>
            {group.map(card => (
              <Card style={{ width: '18rem' }}>
                <Card.Body>
                  <Card.Title>{item.NOME}</Card.Title>
                  <Card.Subtitle className="mb-2 text-muted">{item.CATEGORIA}</Card.Subtitle>
                  <Card.Text>{item.DESCRICAO}</Card.Text>
                  <Card.Link href="#">Card Link</Card.Link>
                  <Card.Link href="#">Another Link</Card.Link>
                </Card.Body>
              </Card>
            ))}
          </CardGroup>
        </row>
      ))}
    </container>
  </>
);

我没有测试过这段代码，但它应该可以工作......

【讨论】：