Bootstrap 5 的 text-uppercase 类不支持响应式断点，仅对 ASCII 字母生效，中文数字无变化，本质是带 !important 的 text-transform: uppercase 封装，动态控制推荐条件绑定类名而非内联样式。
Bootstrap 5 的 text-uppercase 类是否支持响应式断点？
不支持。Bootstrap 5 的 text-uppercase 是一个纯样式类，没有内置响应式变体（比如 text-sm-uppercase 或 text-md-lowercase）。它在所有断点下统一生效，无法按屏幕尺寸切换大小写行为。
如果你需要「小屏保持原样、大屏转大写」这类效果，必须手动扩展 CSS 或用内联 style 覆盖：
<p class="text-uppercase" style="text-transform: none; --bs-breakpoint-md: 768px;"> <span class="d-none d-md-inline" style="text-transform: uppercase;">This shows uppercase only on md+</span> <span class="d-block d-md-none">This stays normal on xs/sm</span> </p>
- 直接复用 Bootstrap 的
d-*响应式显示类 + 内联text-transform是最轻量的解法 - 避免覆盖全局
.text-uppercase，否则会影响其他组件 - 注意：Bootstrap 4 中同样无响应式文本转换类，该限制从 v4 延续至今
为什么加了 text-uppercase 但中文或数字没变化？
因为 text-transform: uppercase 仅对 ASCII 字母（a–z）生效，对中文、日文、数字、标点、全角字符完全无效。这是 CSS 规范行为，不是 Bootstrap 的 bug。
常见误解是以为它能“格式化标题”，结果发现「第1章 标题」加了类后仍是「第1章 标题」——没错，这就是预期表现。
- 想让数字也“视觉大写”，需用字体特性（如
font-variant-numeric: uppercase），但兼容性差且仅影响数字字形 - 中文转大写（如「一」→「壹」）属于业务逻辑，必须用 JS 处理，不能靠 CSS
- 若内容含英文混排（如「Vue3 vs React」），
text-uppercase只会转英文字母，不影响数字和空格
和纯 CSS 的 text-transform: uppercase 有什么区别？
没有本质区别。text-uppercase 就是 Bootstrap 对 text-transform: uppercase 的封装，生成的 CSS 完全一致：
.text-uppercase {
text-transform: uppercase !important;
}
唯一实际差异在于：!important —— 这意味着它会强行覆盖其他同级样式（包括你自定义的 text-transform），容易引发调试困难。
- 如果你已写过
.title { text-transform: lowercase; }，再加text-uppercase会把它顶掉 - 调试时检查 computed styles，看
text-transform是否被标记为!important - 想避免冲突，可删掉 Bootstrap 的
!important（通过自定义 Sass 变量$enable-important-utilities: false），但会影响所有工具类
Vue/React 项目里动态控制大小写，该用类还是内联 style？
优先用类，但别硬套 text-uppercase。框架绑定类名更可控，例如 Vue 的 :class 或 React 的 className 拼接。
问题在于：如果开关逻辑复杂（比如「仅当 status === 'done' 且 language === 'en' 时大写」），把条件塞进模板易读性差。更稳妥的做法是抽成计算属性或 useMemo：
<h2 :class="['h5', isUppercase ? 'text-uppercase' : '']">{{ title }}</h2>
- 不要用
:style="{ textTransform: isUppercase ? 'uppercase' : 'none' }"—— 绕过 CSS 工具类体系，失去一致性 - 避免在循环中高频切换该类，因
text-transform不触发重排，性能影响小，但可读性不如语义化类名 - 若项目用了 Tailwind，直接换
uppercase/lowercase更轻量，无!important干扰
真正容易被忽略的是：大小写转换只是视觉层操作，不会改变 DOM 文本节点的实际值。做表单提交、API 请求或无障碍读取时，仍以原始字符串为准——别指望加个 text-uppercase 就能让后端收到大写数据。
