Bootstrap：如何使input-group内所有输入元素高度一致？附演示

我之前做表单布局时也踩过类似的坑，结合Bootstrap的原生特性，给你两个实用的解决方案，帮你搞定这两个问题：

方案一：响应式网格+标准表单组布局 #

这个方案用Bootstrap的响应式网格系统实现同行排列，同时通过统一的表单类保证高度一致：

<div class="container mt-4">
  <div class="row">
    <!-- 小时输入模块 -->
    <div class="col-md-6 mb-3 mb-md-0">
      <label for="hours" class="form-label">小时</label>
      <input type="number" class="form-control" id="hours" min="0" max="23" placeholder="00">
    </div>
    <!-- 分钟输入模块 -->
    <div class="col-md-6">
      <label for="minutes" class="form-label">分钟</label>
      <input type="number" class="form-control" id="minutes" min="0" max="59" placeholder="00">
    </div>
  </div>
</div>

关键细节： #

• 用row包裹两个col-md-6，中等屏幕及以上会自动分成两列同行，小屏幕自动堆叠，兼顾移动端体验。
• 两个输入框都用form-control类——这是Bootstrap的标准表单控件类，能自动统一padding、border、高度等样式，直接解决高度不一致的问题。
• 给小时模块加mb-3 mb-md-0，小屏幕保留底部间距，中等屏幕去掉，避免布局错乱。

方案二：Input Group紧凑布局 #

如果想要更紧凑的时间输入样式（比如带分隔符），可以用Bootstrap的input-group组件：

<div class="container mt-4">
  <div class="input-group">
    <span class="input-group-text">时间</span>
    <input type="number" class="form-control" placeholder="小时" min="0" max="23">
    <span class="input-group-text">:</span>
    <input type="number" class="form-control" placeholder="分钟" min="0" max="59">
  </div>
</div>

关键细节： #

• input-group会强制内部所有控件高度对齐，完美解决高度不一致的问题。
• 用input-group-text添加标签或分隔符，布局更紧凑美观。

排查现有代码的常见问题 #

如果以上方案没解决你的问题，大概率是现有代码存在这些情况：

• 没使用Bootstrap网格系统，直接把两个输入框放在普通容器里，导致自动换行。
• 给其中一个输入框自定义了padding、height等样式，破坏了Bootstrap的统一样式。
• 没正确引入Bootstrap的CSS文件，导致form-control等类的样式不生效。

你可以对照示例调整代码，应该就能顺利解决问题啦！

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