我应该如何设计卡片的样式，以便每行可以有 3 张卡片？

Posted 2023-02-22

【中文标题】我应该如何设计卡片的样式，以便每行可以有 3 张卡片？

【英文标题】：How should I style the cards so that I can have 3 cards per row?

【发布时间】：2020-02-09 07:21:24

【问题描述】：

使用数组的 map 方法，我正在创建卡片组件以迭代容器中的状态。我想将卡片垂直排列成行，每行只有 3 张卡片。

这是 ContentCard 功能组件：

import React from "react";
import CardLogo from "./../../../Assets/CardLogo.PNG";
import  Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle, Button  from "reactstrap";
import classes from "./ContentCard.module.css";

const contentCard = props => (
  <Card className=classes.ContentCard>
    <CardImg src=CardLogo />
    <CardBody>
      <CardTitle>
        <b>props.title</b>
      </CardTitle>
      <CardSubtitle>from ₹props.price</CardSubtitle>
      <CardText>
        Typically 450-400 words, an e-book is perfect for your target audience ranging from
        prospective customers to users
      </CardText>
      <Button>Order</Button>
    </CardBody>
  </Card>
);
export default contentCard;

这是重用 ContentCard 组件的 ContentCards 父组件。我应该如何设置我在这个组件中迭代状态后得到的卡片的样式，以按照我上面所说的方式排列它们。

import React,  Component  from "react";
import classes from "./ContentCards.module.css";
import ContentCard from "./ContentCard/ContentCard";

class ContentCards extends Component 
  state = 
    content: [
       title: "Blog / Article", price: "500" ,
       title: "Newsletter / Emailer", price: "1000" ,
       title: "Whitepaper", price: "2000" ,
       title: "e-book", price: "1000" ,
       title: "Report-Guide", price: "1000" ,
       title: "Product Description", price: "500" ,
       title: "Website Content", price: "1000" ,
       title: "Video Script", price: "1000" ,
       title: "Company Profile / Brochure", price: "2000" ,
       title: "Press Realise", price: "2000" 
    ]
  ;

  render() 
    let card = this.state.content.map(cnt => (
      <ContentCard key=cnt.title title=cnt.title price=cnt.price />
    ));

    return <div className=classes.ContentCards>card</div>;
  


export default ContentCards;

【参考方案1】：

您可以为此使用 reactstrap 的 Col 和 Row 组件：

由于 bootstrap 使用 12 列系统，为了显示一行 3 列，我将 sm 设置为 4。

我制作了这个沙盒，在整个页面大小中，它连续显示 3 张卡片。

https://codesandbox.io/s/bold-heisenberg-o9s2k

由于我没有课程和徽标，我将它们排除在外。

【参考方案2】：

使用row 类作为容器，然后将col-4 类分配给每个孩子

<div className=`$classes.ContentCards row`>
    
    this.state.content.map(cnt => (
            <ContentCard
                className="col-sm-4"
                key=cnt.title
                title=cnt.title
                price=cnt.price
            />
        ));
    
</div>