最稳妥的做法是使用，必须置于表单控件容器内且紧贴后，不可嵌入或form-floating内部；缺form-text或text-muted会导致样式失效。

Bootstrap 表单里 help-text 怎么加才生效

直接加 <small class="form-text text-muted"></small> 是最稳妥的做法，bootstrap 5 官方只认这个组合；用 <span></span> 或随便套个 class="help-text" 都不会自动对齐、缩放或适配响应式。

• 必须放在 <div class="mb-3">（或任意表单控件包裹容器）内部，且紧贴在 <code><input> 或 <textarea></textarea> 后面
• 不能塞进 <label></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"></small>
• 旧版 Bootstrap 5.0–5.2 可手动加 style="white-space: normal;"
• 避免给 help-text 容器设固定 width 或 max-width，它应该随父容器流式收缩

为什么用了 help-text 却没灰色、没变小、没下移

大概率是漏了关键 class —— form-text 决定样式，text-muted 决定颜色，缺一不可；单独用 text-secondary 或 small 标签都不等价。


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载
• form-text 提供 margin-top、font-size: 0.875em、line-height 等基础样式
• text-muted 是 color: var(--bs-secondary-color)，不是灰色就可能是 CSS 变量未加载或被覆盖
• 检查是否误用了 <small></small> 但没加 class，HTML5 中 <small></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），它已内置对齐和尺寸适配
实际项目里最容易被忽略的是 help-text 的 DOM 位置和语义层级——它不是装饰，是辅助理解输入要求的必要信息，放错位置不仅影响视觉，还会降低可访问性。