-1

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

在此处输入图像描述

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

4

2 回答 2

0

这是使用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>
  );
}

代码沙盒链接

于 2020-11-16T19:54:53.867 回答
0

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

<div class="row" style={{display:'flex',flexWrap:'noWrap'}}>
于 2020-11-16T20:26:02.700 回答