如何更改行中显示的卡片数量答案

【问题标题】：How do I change the number of cards displayed in row如何更改行中显示的卡片数量
【发布时间】：2020-10-22 21:49:39
【问题描述】：

我是新来的反应和引导程序。我正在使用 react card bootstrap 生成卡片布局并向其添加按钮。我可以更改卡片的高度和宽度并应用填充。
我没有得到任何参考，我应该在哪里更改连续显示的卡片数量。
CardUI.jsx

import React from 'react';
import './card-style.css';

const Card = props =>{
    return(
        <div className="card text-center shadow">
            <div className="overflow">
                <img src={props.imgsrc} alt="Image 1" className="card-img-top"/>
            </div>
            <div className="card-body text-dark">
                <h4 className="card-title">{props.title}</h4>
                <h4 className="card-text">{props.text}</h4>
                <a href="#" className="btn btn-outline-success">Click here to know more !</a>
            </div>
        </div>
    );
}

export default Card;

Cards.jsx

import React, { Component } from 'react';
import Card from './CardUI';

import img2 from '../assets/img2.jpg';

class Cards extends Component {
    render() {
        return (
            <div className="container-fluid d-flix justify-content-center">
                <div className="row">
                    <div className="col-md-4">
                        <Card imgsrc={img2} title="Vet" text="All types of vets for your pets"/>
                    </div>
                    <div className="col-md-4">
                        <Card imgsrc={img2} title="Trainer" text="All types of trainer for your pets"/>
                    </div>
                    <div className="col-md-4">
                        <Card imgsrc={img2} title="Hostel" text="Home like hostels for your pets"/>
                    </div>
                    <div className="col-md-4">
                        <Card imgsrc={img2} title="Salon" text="Perfetc salon for your pets"/>
                    </div>
                    <div className="col-md-4">
                        <Card imgsrc={img2} title="Events" text="Events for your pets"/>
                    </div>
                    <div className="col-md-4">
                        <Card imgsrc={img2} title="More" text="Checkout some more interesting activites for your pets"/>
                    </div>
                </div>
            </div>
        );
    }
}

export default Cards;

我现在得到的布局

【问题讨论】：

看看bootstrap's grid documentation。

标签： css reactjs react-bootstrap

【解决方案1】：

<div className="col-md-3">

每行将有 4 个项目

<div className="col-md-6">

每行将有 2 个项目

等等。看看

https://getbootstrap.com/docs/4.0/layout/grid/

【讨论】：

如果它们是连续 3 个项目，我如何减小它们之间的宽度？
您可以在卡片样式中添加填充：D

【解决方案2】：

这取决于 className="col-md-4"

如果您在该行中设置 col-md-3 将是 4 个项目。
如果您在行中设置 col-md-6 将是 2 项。

参见引导网格系统的文档：https://getbootstrap.com/docs/4.5/layout/grid/

【讨论】：