reactjs - 如何将6张卡片和3张卡片对齐在同一行

Question

我现在有 6 张卡片，我想在一行上对齐 3 张卡片，所以我们总共有 2 行。

我的代码在这里https://codesandbox.io/s/card-tykr9?file=/src/App.js

有人可以停下来寻求帮助吗？

Answer 1

您可以使用flexbox代替grid layout来实现相同的结果。

import React from "react";
import "./styles.css";

import {
  Card,
  CardImg,
  CardText,
  CardBody,
  CardTitle,
  CardFooter
} from "reactstrap";

const css = {
  grid: {
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "center"
  }
};

export default function App() {
  const data = [
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 1 ago",
      title: "3D",
      cardText: "web applicatio"
    },
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 4 ago",
      title: "3D",
      cardText: "web applicatio"
    },
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 6 ago",
      title: "3D",
      cardText: "web applicatio"
    },
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 1 ago",
      title: "3D",
      cardText: "web applicatio"
    },
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 4 ago",
      title: "3D",
      cardText: "web applicatio"
    },
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 6 ago",
      title: "3D",
      cardText: "web applicatio"
    },
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 4 ago",
      title: "3D",
      cardText: "web applicatio"
    },
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 6 ago",
      title: "3D",
      cardText: "web applicatio"
    }
  ];
  return (
    <div style={css.grid}>
      {data.map(({ avatar, title, text, cardText }, index) => (
        <div style={{ margin: 0, width: "33%" }}>
          <Card style={{ margin: 5 }}>
            <CardImg top width="100%" src={avatar} alt="Card image cap" />
            <CardBody style={{ padding: 15 }}>
              <CardTitle style={{ fontWeight: "bold" }}>{title}</CardTitle>
              <CardText>{cardText}</CardText>
            </CardBody>
            <CardFooter style={{ padding: 15 }}>
              <small className="text-muted">{text}</small>
            </CardFooter>
          </Card>
        </div>
      ))}
    </div>
  );
}

代码沙箱

Answer 2

查看此代码。我在 bootstrap4 中实现了这段代码。

    <div class="container">
    <div class="row ">
        <h4>we can use "card-deck" for same height and "card-group" to remove margins and padding between cards</h4>
        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4 m">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title" id="harry">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title" id="harry">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title" id="harry">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title" id="harry">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    </div>
</div>

结果： 上述代码的输出