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

【问题标题】：How align 3 cards on the same row如何在同一行对齐 3 张卡片
【发布时间】：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 width="100%" src={avatar} alt="Card image cap" />
          <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 width="100%" src={avatar} alt="Card image cap" />
          <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 width="100%" src={avatar} alt="Card image cap" />
          <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'}}>

【讨论】：