如何在Bootstrap5中实现HTML内联表单label的垂直居中与间距调整

解决方法 #

你遇到的两个问题可以通过调整布局结构+使用Bootstrap5原生工具类解决，无需自定义额外CSS：

1. 首先修正你现有代码的笔误：<div class=r ow>为拼写错误，需改为<div class="row">，该错误会导致栅格布局不生效，是你当前样式异常的基础原因之一
2. 调整布局逻辑：不要将label和对应控件拆分为两个独立的栅格列，否则会因为默认列间距导致两者距离过大，将每对label+控件放在同一个栅格列内，用flex布局控制对齐即可
3. 用Bootstrap内置的align-items-center实现垂直居中，用me-*系列类控制label和控件的间距，完全不需要自定义样式

完整可运行代码 #

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Body -->
<div class="row">
  <div class="col-lg-12">
    <div class="row g-3"> <!-- 可调整g-*数值控制不同控件组之间的整体间距 -->
      <div class="col-md-4">
        <div class="d-flex align-items-center">
          <label for="the_select" class="form-label mb-0 me-2">Key Name</label>
          <select class="form-select flex-grow-1" id="the_select">
            <option selected>Open this select menu</option>
            <option value="One">One</option>
            <option value="Two">Two</option>
            <option value="Three">Three</option>
            <option value="Other">Other</option>
          </select>
        </div>
      </div>
      <div class="col-md-4">
        <div class="d-flex align-items-center">
          <label for="value_field_id" class="form-label mb-0 me-2">Variable Name</label>
          <input type="text" class="form-control flex-grow-1" id="value_field_id">
        </div>
      </div>
    </div>
  </div>
</div>

关键修改说明 #

• 给label加了mb-0清除Bootstrap默认给form-label添加的下边距，避免垂直对齐偏移
• me-2控制label和控件的右侧间距，可根据需要替换为me-1（更小间距）或me-3（更大间距）自由调整
• flex-grow-1让输入框/下拉框占满列内剩余宽度，不会出现控件宽度过小的问题
• align-items-center直接实现label和控件的垂直居中，不需要额外写自定义CSS

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