card宽度随屏幕变化的核心机制是栅格系统，真正起作用的是包裹它的col-*类容器，而非card自身；card必须作为col的直接子元素置于row内，否则col类无效，且需配合img-fluid、text-break等防止内部溢出破坏布局。
Card宽度随屏幕变化的核心机制是栅格系统
Bootstrap的card本身不自带响应式宽度，真正起作用的是包裹它的容器（比如col-*-* 类）。直接给card加col-md-6无效——它必须放在row内、且父级是col才生效。
- 错误写法：
<div class="card col-md-6"> → <code>card不是栅格单元，类不会触发列计算 - 正确结构：
<div class="row"><div class="col-md-6"><div class="card">...</div></div></div> -
col-前缀决定断点：例如col-sm-12 col-md-6 col-lg-4表示小屏占满、中屏半宽、大屏三分之一宽 -
col（无后缀）= 等分父row，每张卡宽度相同 -
col-sm= 小屏及以上等分；col-md= 中屏及以上等分 - 示例：
<div class="row"> <div class="col-sm"><div class="card">...</div></div> <div class="col-sm">...</div> </div>→ 小屏起每行两张，再窄则自动换行堆叠 - 注意：需配合
row-cols-*辅助类控制每行数量，否则小屏下可能挤成一长条 - 图片没加
img-fluid→ 溢出容器，拖拽整行变宽 - 文本无换行控制：
text-wrap或text-break缺失 → 英文/URL长串强制撑宽 - 卡片头/脚用了
position: absolute或display: inline-block→ 脱离文档流，影响父col宽度计算 - 解决方案优先级：先检查
img-fluid，再加text-break到card-body，最后确认没有意外width: 100%覆盖默认行为 <div class="d-flex flex-wrap"> <div class="flex-grow-0 flex-shrink-0 w-25"><div class="card">...</div></div> <div class="flex-fill">...</div> </div>-
flex-grow-0阻止拉伸，w-25固定宽度（25%），flex-fill填满剩余空间 - 优势：不依赖
row/col嵌套层级，适合侧边栏+主卡片这类非网格场景 - 风险：
flex在IE11下兼容性差，若需支持得回退到col方案
用auto-layout columns实现等宽自适应卡片组
当需要多张卡片在一行内自动均分、且随屏幕缩放调整数量时，col不带数字的写法更简洁，比手动算col-lg-3之类更可靠。
Card内部内容溢出导致宽度异常的常见坑
即使外层col设对了，卡片内容（尤其图片、表格、长文本）也可能撑开整个card，破坏响应式布局。
Flex工具类替代栅格实现更灵活的卡片宽度控制
当需要非标准比例（如3:7）、不对称布局或动态数量时，用d-flex + flex-* 类比col更可控。
实际项目里最容易被忽略的，是卡片内部元素对父容器宽度的反向影响——哪怕col-lg-4写得再准，一张没加img-fluid的图就能让整行错位。响应式不是只调外层类的事。
