React Bootstrap 卡片组件在映射数据时是垂直的

Question

我正在使用 React/NextJS 并创建了一个仅在全屏上垂直显示卡片的组件。

如何在映射数据时让卡片水平分组而不是垂直分组（有 4 个输入，我希望每行 3 个。）

我试过使用 and 但没有成功。也许我做错了地方？

卡片组件：

import React from "react";
import { Card } from "react-bootstrap";

function VendorCard(props) {
  return (
    <Card style={{ width: "18rem" }}>
      <Card.Body>
        <Card.Title>{props.name}</Card.Title>
        <Card.Text>{props.country}</Card.Text>
      </Card.Body>
      <Card.Footer>
        <small className='text-muted'>{props.isActive}</small>
      </Card.Footer>
    </Card>
  );
}

export default VendorCard;

列表组件：

function VendorList(vendor) {
  return (
    <div>
      <VendorCard
        key={vendor.id}
        name={vendor.name}
        country={vendor.country}
        classification={vendor.classification}
        riskLevel={vendor.riskLevel}
        signedDocuments={vendor.signedDocuments}
        isActive={vendor.isActive}
      />
    </div>
  );
}

export default VendorList;

首页：

import VendorList from "../components/vendor-list";
import vendors from "../dummy-data";
import { Container } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";

function Home() {
  return (
    <Container style={{ justifyContent: "center" }}>
      <div>{vendors.map(VendorList)}</div>
    </Container>
  );
}

export default Home;

如有任何帮助，我们将不胜感激！

Answer 1

在 react-boostrap 中，您必须使用 <Row> 和 <Col> 组件。 Col 值为 4 使卡片项占行的 1/3 space，然后每行自动容纳 3 个。

Demo | Codesandbox

主页

import React from "react";
import VendorCard from "./VendorCard";
import vendors from "./dummy-data";
import { Container, Row } from "react-bootstrap";

function App() {
  return (
    <Container>
      <Row className="justify-content-md-center">
        {vendors.map((vendor) => (
          <VendorCard key={vendor.name} {...vendor} />
        ))}
      </Row>
    </Container>
  );
}

export default App;

VendorCard

import React from "react";
import { Card, Col } from "react-bootstrap";

function VendorCard(props) {
  return (
    <Col xs="4">
      <Card>
        <Card.Body>
          <Card.Title>{props.name}</Card.Title>
          <Card.Text>{props.country}</Card.Text>
        </Card.Body>
        <Card.Footer>
          <small className="text-muted">{props.isActive}</small>
        </Card.Footer>
      </Card>
    </Col>
  );
}

export default VendorCard;

虚拟数据

module.exports = [
  {
    name: "Cassio",
    country: "Brazil",
    isActive: false
  },
  {
    name: "Paul",
    country: "Brazil",
    isActive: false
  },
  {
    name: "Ben",
    country: "Brazil",
    isActive: false
  },
  {
    name: "Jonnas",
    country: "Brazil",
    isActive: false
  }
];

React Bootstrap 卡片组件在映射数据时是垂直的

React Bootstrap Card component is vertical when mapping data

react-bootstrap

next.js