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

Posted 2023-03-28

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

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

【发布时间】：2021-02-28 00:56:31

【问题描述】：

我想在下图中显示 3 张卡片

但是，我不知道下面的代码有什么问题：https://codesandbox.io/s/little-glitter-cge8r?file=/src/App.js。有人可以帮我吗？

【参考方案1】：

这是使用flex 框的修复：

输出：

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

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

import avatar from "./Original3.JPG";

export default function App() 
  return (
    <div
      style=
        display: "flex"
      
    >
      <div class="col-4">
        <Card
          style=
            padding: "5px"
          
        >
          <CardImg top  src=avatar  />
          <CardBody>
            <CardTitle style= fontWeight: "bold" >3D</CardTitle>
            <CardText>web application</CardText>
          </CardBody>
          <CardFooter>
            <small className="text-muted">Last updated 1 ago</small>
          </CardFooter>
        </Card>
      </div>
      <div class="col-4">
        <Card
          style=
            padding: "5px"
          
        >
          <CardImg top  src=avatar  />
          <CardBody>
            <CardTitle style= fontWeight: "bold" >3D</CardTitle>
            <CardText>web application</CardText>
          </CardBody>
          <CardFooter>
            <small className="text-muted">Last updated 1 ago</small>
          </CardFooter>
        </Card>
      </div>
      <div class="col-4">
        <Card
          style=
            padding: "5px"
          
        >
          <CardImg top  src=avatar  />
          <CardBody>
            <CardTitle style= fontWeight: "bold" >3D</CardTitle>
            <CardText>web application</CardText>
          </CardBody>
          <CardFooter>
            <small className="text-muted">Last updated 1 ago</small>
          </CardFooter>
        </Card>
      </div>
    </div>
  );

Codesandbox Link

【参考方案2】：

您需要在卡片的父 div 上应用样式，就像

<div class="row" style=display:'flex',flexWrap:'noWrap'>