如何将6张卡片和3张卡片对齐在同一行答案

【问题标题】：How align 6 cards and 3 cards on the same row如何将6张卡片和3张卡片对齐在同一行
【发布时间】：2021-02-28 02:42:36
【问题描述】：

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

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

有人可以过来帮忙吗？

【问题讨论】：

这里不适合问这种问题。

标签： reactjs react-bootstrap card

【解决方案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>
  );
}

Code Sandbox

【讨论】：

感谢您的帮助。但是，如何将本地文件夹中的图像检索到“头像”而不是链接中？
您可以将所需的图片保存在项目文件夹中，并提供这些图片的相对路径来代替头像链接。
我试过了，还是不行，你能看看这里codesandbox.io/s/card-forked-fbt1f?file=/src/App.js吗？
把你的图片保存到公共文件夹中，reactjs 环境变量好像有问题什么的，我们还要从index.js 中删除<React.StrictMode>
工作示例：codesandbox.io/s/card-forked-xlym6?file=/src/App.js

【解决方案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>

结果： Output of the above code

【讨论】：