React中使用Bootstrap遍历渲染卡片时如何设置卡片间间距

问题原因 #

你直接给带有col-*栅格类的Card元素添加外边距会触发布局溢出：Bootstrap栅格系统中，col-*的宽度是按父级row的宽度按比例分配的，且默认通过内置左右padding实现列间距，额外添加的横向外边距会让元素总宽度超出分配的栅格宽度，最终导致页面右侧出现多余空白、卡片宽度被挤压、甚至卡片错位换行。

解决方案 #

方案1：使用Bootstrap内置gutter类（最简便）

不需要调整现有结构，直接给父级row添加g-*类控制列之间的间距即可，g是Bootstrap专门用于栅格间距的工具类，不会触发布局溢出，数值可以根据你需要的间距大小调整为1/2/3。
修改后的完整代码如下：

import React from 'react';
import { Button, Card } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import bearingsData from './Product/bearingsData';

const Bearings = () => {
    return (
        <div className="main">
           <div className="title">
                <h1>Bearings</h1>
            </div>
            <div className="container">
                {/* 加g-2实现小间距，可自行调整数值 */}
                <div className="row g-2">     
                { bearingsData.map(product => {
                    return (
                    <Card className="col-xs-12 col-sm-6 col-md-4 col-lg-3 p-4" key={product.id}>
                        <Card.Img src={product.image}/>
                        <Card.Body>
                            <Card.Title>
                                { product.brand }
                            </Card.Title>
                            <Card.Text>
                                { product.name }
                            </Card.Text>
                            <Button> Add to Shopping Cart</Button>
                        </Card.Body>
                    </Card>    
                    );           
                })}            
                </div>                
            </div>
        </div>
    )
}

export default Bearings;

方案2：栅格嵌套（灵活控制卡片样式）

如果需要给卡片加更多自定义边距样式，可以把col-*类从Card上拆分出来，单独作为包裹Card的外层容器，Card本身只负责内容样式，此时给Card加任何边距都不会影响栅格宽度计算，核心修改部分如下：

{ bearingsData.map(product => {
    return (
    <div className="col-xs-12 col-sm-6 col-md-4 col-lg-3" key={product.id}>
        {/* 此时给Card加m-1不会影响布局 */}
        <Card className="m-1 p-4">
            <Card.Img src={product.image}/>
            <Card.Body>
                <Card.Title>
                    { product.brand }
                </Card.Title>
                <Card.Text>
                    { product.name }
                </Card.Text>
                <Button> Add to Shopping Cart</Button>
            </Card.Body>
        </Card>
    </div>
    );           
})}

内容的提问来源于stack exchange，提问作者mazorSharp