Bootstrap的text-类用于快速设置文本颜色和对齐，如text-center、text-muted、text-primary等，需引入完整CSS且作用于当前元素；fs-类基于rem和CSS变量实现响应式字体缩放，比内联样式更灵活可靠。
怎么用Bootstrap的text-* 类改字体颜色和对齐
Bootstrap的排版辅助类不是用来写完整样式表的，而是快速覆盖默认文本行为。比如你刚写完一个<p>，发现它在卡片里靠左太突兀，又不想加CSS类或写style属性——这时候text-center、text-muted就能直接生效。
常见错误是以为text-primary会继承父容器的颜色主题，其实它只作用于当前元素，且依赖Bootstrap的CSS变量（如--bs-primary）。如果项目没引入完整Bootstrap CSS（比如只用了Grid模块），这些类会完全不生效。
-
text-start/text-center/text-end：响应式对齐，支持text-sm-start等断点前缀 -
text-lowercase/text-uppercase/text-capitalize：纯CSS转换，不影响实际DOM文本内容 -
text-reset：把颜色设为inherit，常用于链接嵌套在标题中时避免蓝字破坏层级
为什么fs-*类比font-size内联样式更可靠
Bootstrap的fs-1到fs-6不是固定像素值，而是基于rem和CSS自定义属性（如--bs-font-size-base）计算的。这意味着你改了根字号，所有fs-*会同步缩放；而手写style="font-size: 1.25rem"就卡死在这个值上。
容易踩的坑是混用：fs-4在Bootstrap 5.3+对应1.25rem，但如果你同时写了style="font-size: 16px"，后者会强制覆盖前者——CSS特异性规则在这里照常生效。
立即学习“前端免费学习笔记（深入）”；
-
fs-1≈ 2.5rem，fs-6≈ 0.875rem，中间等比递进 - 响应式变体如
fs-lg-3只在lg及以上生效，比媒体查询写法更轻量 - 不推荐用
fs-*替代语义化标题标签（<h1>~<h6>），它们只管尺寸，不管语义或SEO
lead和display-*类的实际使用边界
lead不是“加粗+放大”，而是专门针对引导性段落设计的：行高拉到1.6，字体放大125%，上下边距微调。它适合放在文章开头那句总结性描述，而不是随便一个<p>都加。
display-1到display-4是超大号文本，但默认没有margin-bottom，直接跟在<h1>后面会显得拥挤。很多人忽略了这点，结果标题和副标题贴在一起。
-
lead应配合常规<p>使用，别套在<div>或<span>上（语义错位） -
display-*类的字体大小是硬编码的（如display-4是1.5rem），不随fs-*体系变化 - 移动端下
display-*可能过大，建议搭配fw-light或text-wrap防溢出
遇到text-decoration-none失效怎么办
这个类只移除<a>的下划线，但它对伪元素（如::after生成的内容）无效。常见场景是用了第三方图标库（比如Font Awesome），图标通过::before插入，而链接本身又被加了装饰线——此时text-decoration-none只能去掉文字部分的线，图标旁的线还在。
另一个坑是嵌套：如果父容器有text-decoration: underline，子元素即使加了text-decoration-none也无效，因为装饰线是继承渲染的，不是单个元素属性。
- 优先检查是否父级有全局
text-decoration设置（比如在body或.card上） - 图标类（如
fa-solid）需单独加text-decoration-none，不能只加在链接上 - 真要彻底清除，得用
style="text-decoration: none !important"，但说明你已脱离Bootstrap工具链逻辑
排版辅助类不是万能胶，它们只解决「小范围、高频次、无状态」的样式调整。一旦涉及多层嵌套、动态内容或设计系统约束，就得退回到CSS变量或自定义类——这才是Bootstrap留给你的真实接口。
