.text-uppercase类不能直接用于<button>元素——因其是可替换元素且Bootstrap按钮类默认设置text-transform: none，需用.btn-uppercase{text-transform:uppercase!important}覆盖。
.text-uppercase 类不能直接用在 <button> 上生效——这是最常见的误操作。
为什么 .text-uppercase 对按钮无效？
Bootstrap 5 官方文档明确说明：.text-uppercase、.text-lowercase、.text-capitalize 这三个类只适用于「文本容器」，比如 <p>、<span>、<div> 等。而原生 <button> 是可替换元素（replaced element），其内部文本渲染机制受 line-height、padding、font 等多重样式影响，CSS 的 text-transform 在某些浏览器（尤其是旧版 Safari 和部分 Android WebView）中可能被忽略或表现不稳定。
更关键的是：Bootstrap 自带的按钮类（如 .btn）已设置了 text-transform: none，会显式覆盖你加上的 .text-uppercase。
正确做法：用自定义 CSS 覆盖 text-transform
不要依赖 Bootstrap 的文本类，直接写样式规则，确保优先级足够高：
立即学习“前端免费学习笔记（深入）”；
.btn-uppercase {
text-transform: uppercase !important;
}
然后在按钮上使用：
<button class="btn btn-primary btn-uppercase">save changes</button>
- 必须加
!important，否则会被.btn的默认text-transform: none覆盖 - 避免用
style="text-transform: uppercase"内联写法——难以复用且破坏样式隔离 - 如果项目用了 Sass，推荐在变量文件后追加该规则，方便全局控制
注意中英文混排和特殊字符
text-transform: uppercase 只对拉丁字母起作用，对中文、数字、连字符（如 SKU-123a）、emoji 完全无影响：
- 输入
SKU-123a→ 渲染为SKU-123A（仅末尾字母变大写） - 输入
张三Btn→ 渲染为张三BTN（中文不变，英文部分大写） - 若业务要求「纯字母部分大写，其余严格保留」，CSS 无法做到；必须用 JS 在提交前处理字符串值
真正容易被忽略的是：按钮文字大小写是视觉层行为，不影响 textContent 或表单提交值。如果你靠这个“看起来大写”来满足设计验收，没问题；但千万别以为后端收到的也是大写——它永远是原始输入的小写字符串。
