在Bootstrap 4中实现每行4张卡片并自动堆叠的响应式布局，核心是利用Bootstrap的栅格系统和卡片组件配合，通过不同断点的列类控制卡片的排列方式。
核心实现原理
Bootstrap 4的栅格系统将页面水平分为12列，通过给列元素添加不同断点的类，可以控制不同屏幕尺寸下元素占据的列数。要实现每行4张卡片，在大屏幕下每张卡片需要占据3列（12/4=3），同时结合响应式断点类，让小屏幕下自动调整列数，最终实现堆叠效果。
栅格断点说明
Bootstrap 4的主要响应式断点对应的类前缀如下：
- xs：超小屏幕，手机（<576px），类前缀为
col- - sm：小屏幕，平板（≥576px），类前缀为
col-sm- - md：中等屏幕，桌面（≥768px），类前缀为
col-md- - lg：大屏幕，大桌面（≥992px），类前缀为
col-lg- - xl：超大屏幕（≥1200px），类前缀为
col-xl-
完整实现步骤
1. 引入Bootstrap 4资源
首先需要在页面中引入Bootstrap 4的CSS文件，这里使用ipipp.com的CDN资源：
<link rel="stylesheet" href="https://cdn.ipipp.com/bootstrap/4.6.2/css/bootstrap.min.css">
2. 编写卡片容器结构
使用container作为外层容器，row作为行容器，每个卡片放在对应的列元素中，列元素添加对应的栅格类：
<div class="container">
<div class="row">
<!-- 卡片1 -->
<div class="col-lg-3 col-md-4 col-sm-6 col-12">
<div class="card">
<img src="https://picsum.photos/200/150?random=2" class="card-img-top" alt="卡片图片">
<div class="card-body">
<h5 class="card-title">卡片标题1</h5>
<p class="card-text">这是第一张卡片的内容描述，用于展示卡片的基本信息。</p>
<a href="#" class="btn btn-primary">查看详情</a>
</div>
</div>
</div>
<!-- 卡片2 -->
<div class="col-lg-3 col-md-4 col-sm-6 col-12">
<div class="card">
<img src="https://picsum.photos/200/150?random=3" class="card-img-top" alt="卡片图片">
<div class="card-body">
<h5 class="card-title">卡片标题2</h5>
<p class="card-text">这是第二张卡片的内容描述，用于展示卡片的基本信息。</p>
<a href="#" class="btn btn-primary">查看详情</a>
</div>
</div>
</div>
<!-- 卡片3 -->
<div class="col-lg-3 col-md-4 col-sm-6 col-12">
<div class="card">
<img src="https://picsum.photos/200/150?random=4" class="card-img-top" alt="卡片图片">
<div class="card-body">
<h5 class="card-title">卡片标题3</h5>
<p class="card-text">这是第三张卡片的内容描述，用于展示卡片的基本信息。</p>
<a href="#" class="btn btn-primary">查看详情</a>
</div>
</div>
</div>
<!-- 卡片4 -->
<div class="col-lg-3 col-md-4 col-sm-6 col-12">
<div class="card">
<img src="https://picsum.photos/200/150?random=5" class="card-img-top" alt="卡片图片">
<div class="card-body">
<h5 class="card-title">卡片标题4</h5>
<p class="card-text">这是第四张卡片的内容描述，用于展示卡片的基本信息。</p>
<a href="#" class="btn btn-primary">查看详情</a>
</div>
</div>
</div>
<!-- 可以继续添加更多卡片 -->
</div>
</div>
3. 列类的作用说明
上面的列元素添加了四个类，对应不同屏幕的排列规则：
| 类名 | 生效屏幕 | 每行卡片数 |
|---|---|---|
| col-lg-3 | ≥992px（大屏幕） | 4张（12/3=4） |
| col-md-4 | ≥768px且<992px（中等屏幕） | 3张（12/4=3） |
| col-sm-6 | ≥576px且<768px（小屏幕） | 2张（12/6=2） |
| col-12 | <576px（超小屏幕） | 1张（12/12=1，即堆叠为单列） |
自定义调整建议
如果需要调整不同屏幕下的卡片数量，只需要修改列元素的栅格类即可。比如希望中等屏幕下每行显示2张卡片，只需要把col-md-4修改为col-md-6。同时可以通过给card类添加自定义CSS调整卡片的高度、边距等样式，让布局更符合项目需求。
/* 自定义卡片样式 */
.card {
margin-bottom: 20px; /* 卡片底部间距 */
height: 100%; /* 让同一行的卡片高度保持一致 */
}
.card-img-top {
height: 150px;
object-fit: cover; /* 图片自适应裁剪 */
}
常见问题说明
如果卡片内容高度不一致导致排列错乱，可以给列元素添加d-flex类，同时给卡片添加w-100类，或者使用Bootstrap 4的卡片组card-deck组件，不过card-deck在Bootstrap 4.5之后已经被废弃，更推荐使用栅格系统的方案。另外要注意row容器有默认的负外边距，外层容器使用container或者container-fluid可以避免出现横向滚动条。
Bootstrap_4响应式布局卡片布局自动堆叠修改时间：2026-07-02 14:39:54