直接用 d-flex flex-wrap 做标签云会导致小屏标签挤成一团、文字折行错乱、点击热区过小，因 .badge 默认为内联元素且 flex-wrap 不控制子项宽度弹性；正确做法是用 row g-1 + col-auto 实现响应式栅格布局，并联动断点与字体工具类（如 fs-7 d-block d-sm-inline）及 JS 注入权重变量实现动态缩放。
为什么直接用 d-flex flex-wrap 做标签云会出问题
很多人一上来就给父容器加 class="d-flex flex-wrap"，结果在小屏上标签挤成一团、文字折行错乱、点击热区过小——根本原因是 .badge 默认是内联元素，flex-wrap 不控制单个标签的宽度弹性，只管“换不换行”，而手机竖屏下需要的是「每个标签独占一行 + 字体可读 + 点击安全」。
- 小屏（
sm）下.badge默认字体仍是0.875rem，配合窄视口后字间距紧、高度压缩，拇指点击极易误触邻近标签 -
flex-wrap不限制子项最小宽度，长标签会撑破列宽，短标签又留大片空白 - 无法响应式缩放字体：固定
font-size在不同断点下要么糊成一片，要么太空旷
用 col-auto + row g-1 替代 flex-wrap
正确做法是让每个标签自己成为栅格项，把换行逻辑交给 Bootstrap 的栅格系统，而不是靠 CSS 弹性布局硬推。
- 每个标签外层包一层
<div class="col-auto">，不是直接把.badge放进.row - 整组用
<div class="row g-1">包裹：g-1提供紧凑但不粘连的间隙；大屏可升为g-2，但别用g-3，否则视觉松散 - 禁止给
.badge手动设font-size或padding—— 它会破坏col-auto的弹性计算；统一缩放改用fs-7/fs-6这类工具类 - 别用
col-6或col-lg-3这类固定列宽类：标签长度差异大，固定列会导致大量空白或强制折行
响应式断点与字体缩放必须联动
标签云的核心矛盾是：小屏要避免横向溢出，大屏要利用空间密度提升信息吞吐量。硬性「全屏堆叠」或「永远横排」都错。
-
col-sm-12：确保手机竖屏下每个标签独占一行，避免缩放后文字糊成一片 -
col-md-auto：≥768px 后启用自动宽度，标签开始并排，数量由内容长度自然决定 -
col-xl-auto加上后能防止超宽屏（如 2560px）下标签被拉得太开——col-md-auto会在所有更大断点持续生效，容易导致稀疏 - 字体大小必须随断点降级：
fs-7 d-block d-sm-inline（d-block确保竖屏独占行，d-sm-inline横屏恢复内联）；中屏起用fs-6，大屏可选fs-5，但别超过fs-4 - 禁用
fw-bold，改用fw-medium—— 标签云重在可扫视，不是强调；加粗反而加重视觉负担
带权重的动态字体缩放需要 JS 注入 CSS 变量
如果后台返回了标签权重（如出现频次），不能靠纯 CSS 实现真正响应式缩放，必须用 JS 注入自定义属性。
- HTML 中给每个
.badge加style="--weight: 3;"（数值来自后端） - CSS 写：
font-size: calc(0.75rem + 0.1vw * var(--weight)); - 注意：这个计算依赖视口宽度（
vw）和权重变量，var(--weight)必须由 JS 动态写入，否则浏览器无法解析 - 别试图用
@media模拟权重效果——媒体查询只认屏幕尺寸，不认数据
最易被忽略的是：权重缩放必须和断点字体缩放正交处理。比如小屏下先用 fs-7 锚定基础大小，再叠加 calc() 微调，否则在窄屏上 0.1vw * 10 可能只加了 0.05rem，完全看不出变化。
