Bootstrap 4 类名需按功能场景查而非死记：栅格类如.col-md-4在≥768px生效，小屏需补.col；颜色类text-/bg-仅作用于文字/背景；border类带!important需用border-left-0清除；container-fluid受父级影响需注意嵌套与负边距。
Bootstrap 4 的常用类名不是靠死记，而是按功能场景查——颜色、边距、栅格、响应式断点这些高频需求，必须清楚哪些类名有效、哪些已废弃、哪些在不同尺寸下行为不一致。
col-md-4 这类栅格类名怎么用才不出错
Bootstrap 4 的栅格前缀基于最小宽度生效，不是“仅在此尺寸下生效”。.col-md-4 表示：屏幕 ≥768px 时占 4 列；小于 768px 时默认堆叠为 100% 宽（即 .col 行为）。
- 别混用
.col-sm-6 .col-md-4却漏掉.col—— 小于 576px 时会塌陷成无宽的 inline 元素（因未设基础列宽） -
.col（无前缀）是“自动等分”类，只在父.row下有效；单独用在非 flex 容器里无效 - 偏移用
.offset-md-2，不是.col-md-offset-2（后者是 Bootstrap 3 写法，4 中已移除） - 如果要“小屏隐藏、中屏显示”，用
.d-none .d-md-block，而不是试图靠.col-md-*隐藏列
text-primary 和 bg-danger 这些语义色类的实际效果
Bootstrap 4 的颜色工具类分两类：text-* 改字体颜色，bg-* 改背景色，但它们不控制 border 或 outline。比如 text-danger 只让文字变红（#dc3545），不会给容器加红色边框。
-
text-muted是 #6c757d，比text-secondary（#6c757d）实际一样——两者在 v4.6+ 已合并为同一色值，别以为有深浅差异 -
bg-dark背景是 #343a40，文字默认是白色，但若叠加text-light会变浅灰，反而降低可读性 - 没有
text-white-on-dark这种组合类，深色背景上想确保文字可见，得手动加text-white - 所有
bg-*类都带!important，覆盖时需同样加!important或提高选择器权重
border 和 border-0 在实际布局中的坑
border 类默认应用的是 1px solid #dee2e6，但它不重置 margin/padding，容易和 .card、.table 等组件的内置边框叠加出双线效果。
- 清除某一边边框，必须用
border-left-0，而不是border-left: none—— 后者会被border的!important覆盖 -
border-primary只改边框颜色，不改粗细或样式，所以得配合border或border-top一起用，例如：border border-primary - 卡片（
.card）自带border，如果又加了border-success，结果是 success 色 + 默认灰色边框混合，视觉混乱 - 表格行 hover 效果（
.table-hover）依赖:hover上的background-color，跟边框无关；加border-bottom后可能遮挡 hover 区域，导致悬停失效
为什么 container-fluid 有时不如预期撑满
container-fluid 确实设了 width: 100%，但它仍受父元素 padding、margin 或 overflow 影响。最常见问题是外层套了 .container 或某个自定义 wrapper，导致内部 container-fluid 被压缩。
- 检查父级是否有
padding（如.mt-5或自定义 class），container-fluid不会抵消它 - 在
body直接用container-fluid最安全；嵌套时建议用row+col替代多层 container -
container-fluid的左右 padding 是固定15px，不会随视口缩放——想真正“贴边”，得额外加mx-n3（负 margin）抵消 - Flex 容器中，
container-fluid若作为 flex item，可能被flex-shrink压缩，此时需加flex-shrink-0
真正难处理的不是类名记不住，而是不同工具类之间的隐式耦合——比如 .table-striped 依赖 tbody > tr:nth-of-type(odd)，一旦你用 JS 动态插入 tr 却没重置奇偶类，条纹就乱了。这类细节，文档不写，但线上一出问题就卡半天。
