Question

我在以网格布局显示反应式引导卡时遇到问题，我想要做的是每行有3张卡，并根据需要有尽可能多的行。

根据我的尝试，似乎传统的CSS显示：grid和grid-template-columns不适用于卡片，因为我的所有卡片最终都显示在第一列中。

因此，我随后阅读了react-bootstrap布局部分，但对如何将其应用于我的情况感到困惑，在那里我通过将数组映射到它来生成卡。我在处理列标签时没有问题，但是不知道如何处理行标签，是否有办法在每x个项目中添加一些内容？

我想做的事情是，如果我有一个迭代器，该迭代器不断地从1循环到3，当它的1时，我希望它具有开始行标签，当它的3时，卡具有结束行标签。

我认为这无关紧要，但这是映射的代码，比较器只是使用这些属性生成了一张卡片

        const people = ppl.map((person) => {
        return (
            <Comp
                key={person.id}
                info={{
                    name: person.name,
                    title: person.title,
                    date: person.created_at,
                    link: person.url,
                    language: person.language
                }}
            />
        );
    });

我将如何实现这一目标？我想到的唯一方法是遍历完成的映射并为我看到的每个x列标签中的一个添加行标签，但是我假设必须有一种更简单的方法？

如何使用映射的反应引导卡设置网格布局？

0 个答案: