如何使用React Bootstrap连续设置卡

问题描述

我想在项目中使用react-bootstrap添加卡。我使用了react-bootstrap中的Grid和CardDeck选项。但是所有卡都放在一列（like this）中。但是我希望这些卡片并排放置，而不是排成一行。（I want my output like this image）。

这是卡片部分的代码

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;

解决方法

我不尝试这样做，这是模数运算的旧方法，应该可以工作，但是没有响应性

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