.form-text靠右对齐需避免直接用text-end，因其块级特性及父容器影响；推荐方案为w-100+text-end、d-flex+justify-content-end或绝对定位；表单右侧提示应改用input-group-text而非form-text。
.form-text 默认左对齐，不能直接用 text-end 靠右——因为它是块级元素，且父容器（如 .form-group 或 .mb-3）通常没设 display: flex，text-align 会生效但常被忽略或覆盖。
为什么 text-end 加在 .form-text 上经常无效
常见错误是直接写：<div class="form-text text-end">最多10个字符</div>。问题在于：
-
.form-text默认display: block，text-align: right确实起作用，但若它被嵌套在d-flex容器里（比如自定义的.form-row），text-align对 flex 子项完全无效 - 很多项目给
.form-text外层加了small或div.form-control-sm，这些类可能重置了display或width，导致对齐“看起来没变” - Bootstrap 5.3+ 的
.form-text带margin-top: 0.25rem，但没设width: 100%，所以即使text-align: right，文字也可能因父容器窄而换行、视觉上不“靠右”
.form-text 靠右对齐的三种可靠方式
按推荐顺序排列，兼顾语义、响应式和兼容性：
- 最简方案：用
text-end+ 显式w-100（确保占满父宽）<div class="form-text text-end w-100">最多10个字符</div> - Flex 方案（适合需要与图标/按钮同行）：外层包
d-flex justify-content-end，.form-text改为small或普通span，避免块级换行<div class="d-flex justify-content-end"><small class="text-muted">最多10个字符</small></div> - 绝对定位方案（仅当需严格贴右、且父容器有
position: relative）：<div class="position-relative"><input type="text" class="form-control"><small class="position-absolute top-100 end-0 text-muted">最多10个字符</small></div>
表单控件右侧 Help Text 的典型布局陷阱
很多人想让 help text 紧挨着 input 右侧（非下方），这已超出 .form-text 设计场景。此时：
-
.form-text不适用——它专为“控件下方辅助说明”设计，语义和样式都不支持内联右置 - 别强行用
float: right：在.form-floating或.input-group里会破坏结构，且移动端失效 - 正确做法是改用
.input-group+.input-group-text，把提示文字放进后缀区域：<div class="input-group"><input type="text" class="form-control"><span class="input-group-text text-muted">max 10</span></div> - 如果必须动态显示/隐藏，注意
.input-group-text的宽度会影响 input 自适应——加w-100到 input 或用flex-grow-1
真正容易被忽略的是：Help Text 的对齐意图往往不是“纯右对齐”，而是“与某个操作按钮对齐”或“在表单末尾统一右收口”。这时候，用 d-flex justify-content-between 包住整个表单项（label + input + help text + button），比单独调 .form-text 更稳定。
