text-lowercase仅改变显示效果，不修改DOM文本值；其依赖text-transform: lowercase，JavaScript读取仍为原始大小写；不可用于大小写敏感场景，且不支持响应式断点。
直接加 text-lowercase 类就行，但得注意它只改显示效果，不改变 DOM 中的实际文本值。
text-lowercase 是纯 CSS 变换，不影响原始字符串
这个类背后是 text-transform: lowercase，浏览器渲染时强制转小写，但 JavaScript 读取 textContent 或表单提交时仍是原始大小写。比如：
<p class="text-lowercase">Hello WORLD</p>
页面显示为 hello world，但 document.querySelector('p').textContent 仍返回 "Hello WORLD"。
- 不适合用于需要大小写敏感比对的场景（如搜索过滤、权限校验）
- 表单输入框不能靠它“规范输入”，得配合 JS 的
input事件手动处理 - SEO 不受影响——搜索引擎索引的是原始 HTML 文本，不是渲染后结果
和 text-uppercase / text-capitalize 混用会冲突
多个文本变换类同时存在时，CSS 层叠规则生效，后声明的会覆盖前一个。但 Bootstrap 的类没有优先级设计，实际效果取决于它们在 HTML 中的书写顺序：
<p class="text-uppercase text-lowercase">Test</p>
显示为 test（text-lowercase 生效），因为它是后写的；反过来就变成 TEST。这不是 bug，是 CSS 特异性一致下的自然行为。
- 不要在一个元素上同时写多个
text-*变换类 - 如果需要动态切换，用 JS 控制类的增删，而不是叠加
-
text-capitalize对连字符、撇号后的字母无效（如john-o'connor→John-o'connor）
响应式断点下 text-lowercase 不自动继承
Bootstrap 的响应式文本对齐类（如 text-sm-center）有断点支持，但大小写类（text-lowercase 等）没有响应式变体。也就是说：
-
text-lowercase在所有屏幕尺寸下都生效，无法“仅在移动端小写” - 真有这种需求，得手写媒体查询或用 JS 监听
resize动态加类 - 别试图伪造响应式：比如
text-sm-lowercase是无效类，不会触发任何样式
遇到 text-lowercase 不生效？先查这三件事
常见失效原因不是类名写错，而是上下文干扰：
- 父元素设置了
font-variant-caps: all-small-caps或类似字体特性，会覆盖text-transform - 元素是
input或textarea—— 这些表单控件默认忽略text-transform（除非显式设style="text-transform: lowercase"） - 用了自定义字体且该字体缺失小写字母字形（极少见，但某些 icon font 会出现）
最稳妥的验证方式：打开浏览器开发者工具，检查元素 computed 样式里 text-transform 是否为 lowercase，以及是否被其他规则 override。
