如何在HTML、CSS及Bootstrap 5中为文字添加下标（sub）

一、HTML结构优化 #

默认<sub>标签可直接用于标记下标，但为了让「Max 100」「Min 1」排版更紧凑协调，建议结合Bootstrap组件规整布局，替代零散的标签排列：

<!-- 优化后的结构，适配Bootstrap布局 -->
<div class="input-group mb-3">
  <input type="number" class="form-control text-primary" alt="height" value="10">
  <span class="input-group-text">
    Height 
    <sub>Max 100</sub>
    <sub>Min 1</sub>
  </span>
</div>
<div class="input-group mb-3">
  <input type="number" class="form-control text-primary" alt="depth" value="10">
  <span class="input-group-text">
    Depth 
    <sub>Max 100</sub>
    <sub>Min 1</sub>
  </span>
</div>

用Bootstrap的input-group组件能让输入框和文本自动对齐，解决原生排版混乱的问题。

二、自定义CSS调整下标样式 #

默认<sub>的样式可能和截图效果有差距，添加以下CSS可精准控制下标字体、颜色和间距：

/* 自定义下标样式 */
sub {
  font-size: 0.7rem; /* 缩小下标字体，贴近截图比例 */
  color: #666; /* 用灰色弱化下标，避免抢主文本焦点 */
  margin-left: 0.6rem; /* 给两个下标之间留出合适间距 */
  vertical-align: bottom; /* 调整下标垂直位置，更贴近截图效果 */
}

三、Bootstrap 5内置类快速实现 #

如果不想写自定义CSS，可直接用Bootstrap的文本工具类快速配置样式：

• text-muted：设置下标为柔和的灰色
• fs-7：设置下标字体大小（Bootstrap字体类，fs-7为最小尺寸）
• ms-2：给下标添加左侧间距

示例代码：

<div class="input-group mb-3">
  <input type="number" class="form-control text-primary" alt="height" value="10">
  <span class="input-group-text">
    Height 
    <sub class="text-muted fs-7 ms-2">Max 100</sub>
    <sub class="text-muted fs-7 ms-2">Min 1</sub>
  </span>
</div>

通过以上任意一种方式，即可实现和截图一致的下标效果，同时保证布局规整、样式统一。

内容的提问来源于stack exchange，提问作者Matrix