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

【问题标题】：How set cards in a row using react bootstrap如何使用反应引导程序连续设置卡片
【发布时间】：2020-12-30 05:56:12
【问题描述】：

我想在项目中使用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;

【问题讨论】：

有什么问题？
这是给你的：stackoverflow.com/questions/29546550/flexbox-4-items-per-row
@A.R.SEIF 先生，也许我之前没有表达我的问题。我编辑我的问题。希望现在你能理解我的问题
@JB_DELR 先生，我在发布此问题之前尝试了您的回答。不幸的是，这个答案在我的问题中不起作用
@Md.Al-aminSahed 访问react-bootstrap。

标签： css reactjs react-bootstrap bootstrap-cards

【解决方案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>
       
      );
    };

【讨论】：