如何在input-group组件内添加小型文本？

你可以通过在input-group容器内添加自定义文本元素，配合CSS调整样式实现图中效果。先修正你原代码里的两个问题：option标签不支持href属性，dropdown-divider不能直接放在select内部（select的合法子元素仅为option和optgroup）。

修改后的完整代码 #

<div class="input-group align-items-center">
  <select class="form-select p-2" style="border-radius: 8px 0 0 8px;">
    <option>Department</option>
    <option>Action</option>
    <option>Another action</option>
    <option>Something else here</option>
    <optgroup label="---"></optgroup> <!-- 用optgroup模拟分隔线效果 -->
    <option>Separated link</option>
  </select>
  <!-- 新增的小型提示文本 -->
  <span class="px-2 text-muted" style="font-size: 0.875rem; border: 1px solid #ced4da; border-left: none; border-radius: 0 8px 8px 0; display: flex; align-items: center; height: 100%;">
    小型提示文本
  </span>
</div>

关键实现细节 #

• 给input-group加align-items-center类，确保下拉框和文本元素垂直居中对齐
• 分别设置下拉框和文本容器的圆角，让组件视觉上保持统一
• 用text-muted类设置文本浅灰色，配合font-size缩小字号，实现小型文本效果
• 给文本容器添加与下拉框一致的边框（去掉左边框），让整体看起来是一个完整组件
• 用optgroup模拟原代码中的分隔线效果，避免select内部出现非法元素

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