bootstrap的text-类用于快速设置文本颜色和对齐，如text-center、text-muted、text-primary等，需引入完整css且作用于当前元素；fs-类基于rem和css变量实现响应式字体缩放，比内联样式更灵活可靠。
怎么用Bootstrap的text-* 类改字体颜色和对齐
Bootstrap的排版辅助类不是用来写完整样式表的，而是快速覆盖默认文本行为。比如你刚写完一个<p></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></h1>~<h6></h6>），它们只管尺寸，不管语义或SEO
lead和display-*类的实际使用边界
lead不是“加粗+放大”，而是专门针对引导性段落设计的：行高拉到1.6，字体放大125%，上下边距微调。它适合放在文章开头那句总结性描述，而不是随便一个<p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>都加。
display-1到display-4是超大号文本，但默认没有margin-bottom，直接跟在<h1></h1>后面会显得拥挤。很多人忽略了这点，结果标题和副标题贴在一起。
-
lead应配合常规<p></p>使用，别套在<div>或<code><span></span>上（语义错位） -
display-*类的字体大小是硬编码的（如display-4是1.5rem），不随fs-*体系变化 - 移动端下
display-*可能过大，建议搭配fw-light或text-wrap防溢出 - 优先检查是否父级有全局
text-decoration设置（比如在body或.card上） - 图标类（如
fa-solid）需单独加text-decoration-none，不能只加在链接上 - 真要彻底清除，得用
style="text-decoration: none !important"，但说明你已脱离Bootstrap工具链逻辑
遇到text-decoration-none失效怎么办
这个类只移除<a></a>的下划线，但它对伪元素（如::after生成的内容）无效。常见场景是用了第三方图标库（比如Font Awesome），图标通过::before插入，而链接本身又被加了装饰线——此时text-decoration-none只能去掉文字部分的线，图标旁的线还在。
另一个坑是嵌套：如果父容器有text-decoration: underline，子元素即使加了text-decoration-none也无效，因为装饰线是继承渲染的，不是单个元素属性。
排版辅助类不是万能胶，它们只解决「小范围、高频次、无状态」的样式调整。一旦涉及多层嵌套、动态内容或设计系统约束，就得退回到CSS变量或自定义类——这才是Bootstrap留给你的真实接口。
