Bootstrap 5.3.3 Input Group中Range高度异常问题及修复咨询

问题出在你给range输入框同时添加了form-control和form-range类，这两个类的样式规则存在冲突——form-control自带的内边距、固定高度设置，和form-range针对滑块设计的默认样式不兼容，最终导致组件高度显示异常。

修复步骤： #

• 移除range输入框上的form-control类，仅保留form-range
• 给包含range的input-group添加align-items-center工具类，确保滑块与左侧文本标签垂直对齐

修复后的完整代码： #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<div class="container">
  <form>
    <div class="input-group align-items-center">
      <span class="input-group-text" id="formControlRange">range</span>
      <input type="range" class="form-range" aria-describedby="formControlRange">
    </div>
    <div class="input-group mt-3">
      <span class="input-group-text" id="formControlText">text</span>
      <input type="text" class="form-control" aria-describedby="formControlText">
    </div>
  </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>

关键修改说明： #

1. 移除form-control类：form-range是Bootstrap专为滑块组件设计的样式类，无需额外添加form-control，二者的样式规则会互相干扰
2. 添加align-items-center：利用Bootstrap的Flex工具类，让滑块和左侧的文本标签在垂直方向上居中对齐，保证整体视觉一致性
3. 增加mt-3类：给第二个输入组添加上间距，避免两个组件过于拥挤，提升页面可读性

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