css - 如何使用反应引导程序连续设置卡片

Question

我想react-bootstrap在项目中添加卡片。我使用了 react-bootstrap 中的 Grid 和 CardDeck 选项。但是所有卡片都在一列中（像这样）。但我希望这张卡片并排出现，而不是排成一行。（我想要我的输出像这张图片）。

这里是卡片部分的代码

import Card from 'react-bootstrap/Card';


const Course = (props) => {
  const {title, price,details,img} = props;
  return (
    <div>
    <div className="col-md-4 col-12 mt-5 mx-auto">
    <Card>
      <Card.Img variant="top" src={img} />
      <Card.Body>
        <Card.Title>{title}</Card.Title>
        <Card.Title>{price}</Card.Title>
        <Card.Text>
         {
           details
         }
        </Card.Text>
      </Card.Body>
     
    </Card>
   
    
    </div>
    
    </div>
  );
};

export default Course;

我在哪里传递价值

import React from "react";
import fakeData from "../FakedData/FakeData";
import Course from "../Course/Course";
import CardDeck from 'react-bootstrap/CardDeck';
const Home = () => {
  return (
    <div>
      <div className="container">
      <div className="row">
      <CardDeck>
      {fakeData.map((data) => {
        return (
          <Course
            key={data.id}
            title={data.title}
            price={data.price}
            details={data.details}
            img={data.img}
          />
        );
      })}
      </CardDeck>
      
      </div>
        </div>
      </div>
   
  );
};

export default Home;

Answer 1

我不尝试这个，这是模数的旧方法，应该可以工作，但没有响应

 const Home = () => {
    const numInRow = 4;
      return (
        <div>
          <div className="container">
           <div class="d-flex justify-content-center"> // <---- div first row
          {fakeData.map((data, idx) => { //<--- note the idx
            return (
              <Course
                key={data.id}
                title={data.title}
                price={data.price}
                details={data.details}
                img={data.img}
              />
              {idx % numInRow === 0 && </div><div class="d-flex justify-content-center">} // <--- use modulo to close row and open a new one
            );
          })}
          </div> //<-- div last row

            </div>
          </div>
       
      );
    };