加了col-12仍不全屏是因为container-fluid默认padding、卡片固定宽度及缺失row容器三层约束；需用px-0清除左右内边距、嵌套row、删除width样式、配合min-vh-100撑高。
直接给卡片加 col-12 并不能保证它“全屏”，真正卡住的往往是父容器内边距、固定宽度声明和缺失的栅格容器结构——删掉所有 width 内联样式，确保卡片嵌套在 row 里，再用 px-0 清除 container-fluid 的左右 padding，才能视觉上真正贴边撑满。
为什么加了 col-12 还是没全屏？
常见现象：卡片左右留白、高度塌缩、或被挤出视口。这不是 col-12 失效，而是它被三层隐性约束压制：
-
container-fluid默认带padding-left/padding-right（v5 是 1.5rem），不手动清就永远不贴边 - 卡片自身写了
style="width: 17em"或其他固定宽度，会覆盖 flex 布局逻辑，导致在小屏横向溢出 - 漏掉了
row容器 ——col必须嵌套在row内才能触发负 margin 抵消 padding，否则退化成普通块级元素，换行和宽度控制全失效
如何让卡片在移动端真正贴边+撑高？
关键不是“让卡片变宽”，而是清除干扰、释放空间、显式撑高：
- 外层用
container-fluid px-0：精准清除左右 padding，保留上下间距（如需完全贴边，改用p-0） - 卡片必须包在
row里：<div class="row"><div class="col-12">...</div></div> - 删掉所有卡片上的
style="width: ..."或自定义 width CSS，包括第三方组件注入的 inline width - 高度靠
min-vh-100而非h-100：前者确保至少占满视口，内容多时自动延展；后者依赖父级 height 设置，极易失效
图标和文字在全屏卡片里怎么垂直居中不偏移？
默认行内图标与文字基线对齐不稳定，尤其在字体缩放或不同断点下容易“浮高”或下沉。不用 card-header/card-body 切分结构，改用 flex 控制内部流式布局更稳：
立即学习“前端免费学习笔记（深入）”；
- 把图标和文字一起包进
<div class="d-flex align-items-center"> - 图标用
me-3（不是mr-3）保持右侧间距，兼容 RTL - 文字容器加
text-truncate防止长文本撑破列宽 - 必要时限制行高：
style="max-height: 2.4em; line-height: 1.2;"，对应两行不截断
移动端 Safari 下卡片内容被状态栏遮挡怎么办？
iOS Safari 的地址栏/状态栏收放会导致视口高度抖动，vh 单位不可靠。真正能兜底的是 env(safe-area-inset-top)：
- 给卡片顶部区域（如 header 或标题 wrapper）加
padding-top: env(safe-area-inset-top) - 不要给
modal-dialog或卡片容器本身加 margin/padding 来“模拟”状态栏高度——这会破坏居中逻辑 - 避免用
100vh设卡片高度，改用100dvh（需确认目标环境支持，2023 年后主流浏览器已普及）
最麻烦的从来不是写对 class，而是卡片嵌套层级里那些没声明但实际生效的 padding 和 max-width —— 它们不会出现在你的 HTML 里，却实实在在挡住卡片伸展。打开 DevTools，逐层检查 computed 样式里的 box-sizing、padding 和 max-width，比反复试 class 更快定位问题。
