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

Question

使用数组的 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;

Answer 1

您可以为此使用 reactstrap 的 Col 和 Row 组件：由于 bootstrap 使用 12 列系统，为了显示一行 3 列，我将 sm 设置为 4。我制作了这个沙箱，它以全页大小连续显示 3 张卡片。https://codesandbox.io/s/bold-heisenberg-o9s2k由于我没有课程和徽标，因此我将它们排除在外。

Answer 2

使用row类作为容器，然后将col-4类分配给每个孩子<div className={`${classes.ContentCards} row`}>&nbsp; &nbsp; {&nbsp; &nbsp; this.state.content.map(cnt => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ContentCard&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="col-sm-4"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={cnt.title}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title={cnt.title}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; price={cnt.price}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; ));&nbsp; &nbsp; }</div>