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

Posted 2023-03-28

【中文标题】如何将6张卡片和3张卡片对齐在同一行

【英文标题】：How align 6 cards and 3 cards on the same row

【发布时间】：2021-02-28 02:42:36

【问题描述】：

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

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

有人可以过来帮忙吗？

【问题讨论】：

这里不适合问这种问题。

【参考方案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  src=avatar  />
            <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