基于对象值渲染Bootstrap卡片时网格布局失效该如何解决？

问题根因 #

你的布局异常是由于网格容器的类名配置错误，不符合Bootstrap的布局规则导致的：

1. 你在Trails.js中给卡片父容器写的card-deck-row是错误的自定义类名，Bootstrap要求卡片网格必须同时使用row（行容器）和card-deck（卡片组）两个原生类，缺少row类会导致内部的col-*类无法按栅格规则排列。
2. 没有配置卡片等高规则，内容长度不同的卡片会出现高度错位。

修正代码 #

1. Trails.js修改

<div id="trails" className="container rounded border shadow py-3">
    <div className="card-deck row">
        {/* 给map遍历项添加唯一key，符合React规范 */}
        {this.props.trailList.map((item, index) => {
            return (
                {/* 新增mb-4设置卡片底部间距，避免上下行贴紧 */}
                <div className="col-lg-4 mb-4 card-col" key={index}>
                    {/* 新增h-100让卡片撑满列容器高度，保证等高 */}
                    <Card
                        className="trailCard h-100"
                        trailName={item.trailName}
                        trailType={item.trailType}
                        trailDescription={item.trailDescription}
                        trailLocation={item.trailLocation}
                    />
                </div>
            )
        })}
    </div>
</div>

2. Card.js修改（可选，优化内容对齐效果）

class Card extends Component {
    render() {
        return (
                {/* 合并外部传入的className */}
                <div className={`card ${this.props.className}`}>
                    <img className="card-img-top" alt="" src="https://s24953.pcdn.co/blog/wp-content/uploads/2018/01/Templates-Guide-header-1-1024x576.png" />
                    {/* 新增flex布局配置，让内容自动分配空间 */}
                    <div className="card-body d-flex flex-column">
                        <h5 className="card-title">{this.props.trailName}</h5>
                        <p className="card-text"><b>Location: </b>{this.props.trailLocation}</p>
                        <p className="card-text"><b>Category: </b>{this.props.trailType}</p>
                        {/* mt-auto让描述段落自动靠下，保证所有卡片底部对齐 */}
                        <p className="card-text mt-auto"><b>Description: </b>{this.props.trailDescription}</p>
                    </div>
                </div>
        )
    }
}

export default Card;

修正说明 #

• row类会将子元素设为flex布局，自动按col-lg-4的规则每行排列3个卡片
• h-100和flex布局配置保证所有卡片高度一致，不会因为内容长度不同出现错位
• 新增的间距类优化了整体视觉效果，避免卡片拥挤贴边

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