input-group内双文本框标签垂直对齐异常问题求助

你的问题源于标签与输入框未按对应关系分组，导致布局错位。以下是修正后的代码，利用Bootstrap网格系统实现标签与输入框的垂直对齐：

<div class="col-sm-6 mt-3">
  <div class="row g-2">
    <!-- 到期日期区域 -->
    <div class="col">
      <label class="form-label mb-1" for="exp-date">Exp.</label>
      <input type="text" class="form-control contact-form-input exp-date-select" placeholder="MM/YY" id="exp-date">
    </div>
    <!-- CVC区域 -->
    <div class="col">
      <label class="form-label mb-1" for="cvc">CVC</label>
      <input type="text" class="form-control contact-form-input sec-code-select" placeholder="000" id="cvc">
    </div>
  </div>
</div>

关键改动说明： #

• 新增.row容器包裹两个.col列，让每个输入项（标签+输入框）独立占据一列，确保标签与对应输入框垂直对应
• 移除原有的input-group，该组件更适合输入框与附加控件（如按钮、图标）的组合，而非需要独立标签的并列输入场景
• 添加.g-2类为列之间设置合适间距，优化视觉体验

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