Bootstrap 4 如何正确实现表单行逐行垂直对齐布局

错位核心原因 #

• DOM结构错误：modal-body 提前闭合，后续Section选择、日期时间选择、按钮区块全部脱离模态框主体和表单容器，同时末尾存在多处重复的</form>、</div>闭合标签，打乱布局流
• 栅格规则不匹配：左侧标签固定用了col-md-4宽度，但右侧的单选组、输入框组没有套对应宽度的列容器，无法和标签形成对齐的行布局
• 组件兼容问题：代码里用了Bootstrap 5专属的btn-check类，在4.6.1版本下无法正常渲染按钮式单选框
• 位置错误：操作按钮没有放在日期时间区块的对应列下，独立成行使整体布局错位
• 属性错误：日期、时间输入框写了不存在的datetext、timetext type值

修复要点 #

• 梳理DOM层级：所有表单行全部放入<form>标签内部，删除多余闭合标签，保证modal-body只包含完整表单内容
• 统一栅格布局：每一行左侧标签占col-12 col-md-4，右侧控件组统一包裹在col-12 col-md-8容器内，保证多端对齐
• 替换BS5专属类为BS4兼容的按钮单选写法
• 调整按钮位置：将Cancel、Reserve按钮放入日期时间选择的右侧列容器内，放在两个输入框下方，靠右对齐
• 修正输入框type属性，补充必要的Bootstrap依赖JS保证模态框正常运行

修复后完整代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<div id="reserveTable" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg" role="content">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Reserve a Table </h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <form>
          <!-- 人数选择行 -->
          <div class="form-row align-items-center mb-3">
            <legend class="col-form-label col-12 col-md-4">Number of Guests</legend>
            <div class="col-12 col-md-8">
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="numberGuests" id="guests1" value="1">
                <label class="form-check-label" for="guests1">1</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="numberGuests" id="guests2" value="2" checked>
                <label class="form-check-label" for="guests2">2</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="numberGuests" id="guests3" value="3">
                <label class="form-check-label" for="guests3">3</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="numberGuests" id="guests4" value="4">
                <label class="form-check-label" for="guests4">4</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="numberGuests" id="guests5" value="5">
                <label class="form-check-label" for="guests5">5</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="numberGuests" id="guests6" value="6">
                <label class="form-check-label" for="guests6">6</label>
              </div>
            </div>
          </div>

          <!-- 区域选择行 -->
          <div class="form-row align-items-center mb-3">
            <legend class="col-form-label col-12 col-md-4">Section</legend>
            <div class="col-12 col-md-8">
              <div class="btn-group btn-group-toggle" data-toggle="buttons">
                <label class="btn btn-outline-success active">
                  <input type="radio" name="section" id="nonSmoking" autocomplete="off" checked> Non-Smoking
                </label>
                <label class="btn btn-outline-danger">
                  <input type="radio" name="section" id="smoking" autocomplete="off"> Smoking
                </label>
              </div>
            </div>
          </div>

          <!-- 日期时间选择行 -->
          <div class="form-row align-items-start mb-3">
            <legend class="col-form-label col-12 col-md-4">Date and Time</legend>
            <div class="col-12 col-md-8">
              <div class="row">
                <div class="col-6 col-md-5 mb-2">
                  <input class="form-control" type="text" placeholder="Date" id="reservationDate">
                </div>
                <div class="col-6 col-md-5 mb-2">
                  <input class="form-control" type="text" placeholder="Time" id="reservationTime">
                </div>
              </div>
              <!-- 操作按钮放在输入框下方 -->
              <div class="d-flex justify-content-end mt-2">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary btn-sm ml-1">Reserve</button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

效果说明 #

• 桌面端下所有行的左侧标签统一占4列宽度，右侧控件占8列宽度，人数、区域、日期时间三个区块垂直对齐
• 移动端下标签自动占满整行，控件换行显示，适配小屏幕
• 操作按钮固定在日期、时间输入框的右下方，符合交互预期
• 吸烟/非吸烟区选择按钮兼容Bootstrap 4.6.1的组件规则，可正常点击切换

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