最稳妥的做法是使用<small class="form-text text-muted">，必须置于表单控件容器内且紧贴<input>后，不可嵌入<label>或form-floating内部；缺form-text或text-muted会导致样式失效。
Bootstrap 表单里 help-text 怎么加才生效
直接加 <small class="form-text text-muted"> 是最稳妥的做法，bootstrap 5 官方只认这个组合；用 <span> 或随便套个 class="help-text" 都不会自动对齐、缩放或适配响应式。
- 必须放在
<div class="mb-3">（或任意表单控件包裹容器）内部，且紧贴在<input>或<textarea>后面 - 不能塞进
<label>里，否则语义错误，屏幕阅读器会把提示和标签混读 - 如果用了
form-floating，help-text 得放在整个form-floating容器外侧，否则会被浮动 label 遮挡
input 后面的提示文字不换行/被截断怎么办
默认 form-text 是块级元素，但若父容器宽度极小（比如在 col-sm-2 里），文字会溢出或强制单行。这不是 bug，是 CSS 的正常行为。
- 加
text-wrap类（Bootstrap 5.3+）让文字自动换行：<small class="form-text text-muted text-wrap"> - 旧版 Bootstrap 5.0–5.2 可手动加
style="white-space: normal;" - 避免给 help-text 容器设固定
width或max-width，它应该随父容器流式收缩
为什么用了 help-text 却没灰色、没变小、没下移
大概率是漏了关键 class —— form-text 决定样式，text-muted 决定颜色，缺一不可；单独用 text-secondary 或 small 标签都不等价。
-
form-text提供 margin-top、font-size: 0.875em、line-height 等基础样式 -
text-muted是 color: var(--bs-secondary-color)，不是灰色就可能是 CSS 变量未加载或被覆盖 - 检查是否误用了
<small>但没加 class，HTML5 中<small>仅语义上表示细则，无默认样式
需要图标 + 文字提示？别硬塞 Font Awesome 到 help-text 里
图标加文字本身没问题，但要注意 vertical-align 和行高匹配，否则图标会吊在文字上方或下沉。
- 给图标加
align-text-bottom或style="vertical-align: text-bottom;" - 避免用
fa-fw（固定宽图标），它可能撑开行高导致上下间距异常 - 更稳的方式：用
<i class="bi bi-info-circle me-1"></i>（Bootstrap Icons），它已内置对齐和尺寸适配
