bootstrap 5 文章卡片响应式布局需用 row + col-sm-12 col-md-6 col-xl-4 实现单列→双列→三列；图片加 img-fluid，标题加 text-truncate，摘要用 -webkit-box 三行截断；分页用 pagination-lg 和 justify-content-center 优化触控；优先采用带 loading 状态的按钮而非无限滚动。
用 Bootstrap 5 的 col-* 类控制文章卡片在不同断点下的排列
Bootstrap 5 默认不包含 float 布局，响应式栅格完全基于 Flexbox，所以文章列表页直接用 row + col-md-6 col-lg-4 就能实现「小屏单列 → 平板双列 → 大屏三列」的效果。关键不是堆 class，而是根据内容密度选对断点：
-
col-sm-12 col-md-6 col-xl-4：适合图文并茂、带摘要的文章卡片，移动端不拥挤，桌面端有足够呼吸感 - 如果卡片高度差异大（比如有的带图、有的纯文字），加
row-cols-2 row-cols-md-3到row上，比单个col更稳——它强制每行固定数量，避免因高度不一致导致的错位 - 别用
col-6（无断点前缀）：它会在所有屏幕宽度下都占一半，小屏上卡片太窄，文字挤成一团
给文章卡片加 card 时必须处理图片和文字的响应行为
Bootstrap 的 card 默认不约束内部元素尺寸，图片溢出、标题换行断裂、摘要截断不统一是高频问题：
- 图片一律套
<img src="..." class="card-img-top img-fluid">：img-fluid才保证等比缩放；漏掉它，图片在小屏会横向撑破容器 - 标题用
<h5 class="card-title"></h5>，但需加text-truncate+fw-bold防止长标题折行破坏卡片高度一致性 - 摘要段落加
class="card-text mb-0"，并用style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;"实现跨浏览器三行截断（CSS 仅限此场景，无需额外框架）
分页组件 pagination 在移动设备上需要手动优化点击热区
默认 pagination 的 <li> 内链接文字小、间距窄，拇指在手机上极易点错。这不是 Bug，是设计假设你用鼠标：
- 给整个分页容器加
pagination pagination-sm反而更糟——字号更小；应该用pagination-lg或自定义padding: 0.5rem 0.75rem - 在小屏下让分页居中：加
justify-content-center到pagination的父nav元素上，否则默认左对齐，右侧留白难操作 - 禁用非当前页的
<a></a>标签默认下划线和颜色变化，改用text-decoration-none text-muted，视觉更干净，也减少误触反馈干扰
加载更多按钮与无限滚动之间，优先用带 loading 状态的 btn 按钮
真实项目里，用户并不需要“无限滚动”的复杂逻辑，尤其当文章总数明确（比如后台返回了 total）、SEO 要求静态分页时。一个带状态切换的按钮更可控：
- 初始状态：
<button type="button" class="btn btn-outline-primary w-100">加载更多</button> - 点击后立即置灰 + 加载图标：
disabled+innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>加载中...' - 失败后恢复按钮并提示错误，而不是静默失败——用户需要知道“没加载出来”还是“已经到底了”
- 千万别用
IntersectionObserver自己搞无限滚动：除非你已处理好 history.state、服务端分页参数同步、以及滚动位置恢复（比如从详情页返回），否则容易造成体验断层
响应式不是让页面“看起来能缩放”，而是让信息层级、操作热区、加载节奏在不同设备上都保持可读、可触、可预期。卡片间隙、字体大小、按钮尺寸这些细节，比用多少个 col 类更能决定用户是否愿意往下翻。
