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

Question

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

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

标签： reactjsreact-bootstrapcard

Answer 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>
  );
}

代码沙盒链接