Bootstrap 5 表单布局错位 如何调整代码实现预期排版效果

你的代码布局错乱是Bootstrap栅格用法错误、标签嵌套不规范导致的，按以下步骤调整即可实现预期布局：

• 首先修复标签结构错误：补全定义列表缺失的外层<dl>标签，删除位置错乱的多余闭合标签（错位的</dd></dl>、无对应开标签的</form></div>等），保证标签嵌套顺序正确。
• 修正栅格布局用法：Bootstrap的col-*列类必须直接放在带row类的容器内才能生效，给每个表单行外层添加row容器，不要把列类直接加在<dt>、表单控件外层。
• 调整字段宽度配置：「Date and Time」标签和上方「Number of Guests」保持一致，使用col-md-2类占左侧2列宽度，两个输入框放在col-md-10的右侧容器内并排展示，不要给标签错加col-md-6类。
• 移除文本输入框上错误的类：form-check、form-check-inline是单选/复选框专用的样式类，不要套在普通文本输入框外层，避免打乱默认间距。

修正后完整代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="row row-content">
  <div class="col-sm-8 offset-md-2">
    <div class="card" id="card1">
      <h3 class="card-header bg-warning text-white">Reserve a Table</h3>
      <div class="card-body">
        <dl>
          <!-- 人数选择行 -->
          <div class="row mb-3">
            <dt class="col-12 col-md-2">Number of Guests</dt>
            <dd class="col-12 col-md-10 mb-0">
              <div class="form-check form-check-inline" id="form1">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                <label class="form-check-label" for="inlineRadio1">1</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                <label class="form-check-label" for="inlineRadio2">2</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
                <label class="form-check-label" for="inlineRadio3">3</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="option4">
                <label class="form-check-label" for="inlineRadio4">4</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" value="option5">
                <label class="form-check-label" for="inlineRadio5">5</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio6" value="option6">
                <label class="form-check-label" for="inlineRadio6">6</label>
              </div>
            </dd>
          </div>
          <!-- 日期时间选择行 -->
          <div class="row mb-3">
            <dt class="col-12 col-md-2">Date and Time</dt>
            <dd class="col-12 col-md-10 mb-0">
              <div class="row">
                <div class="col-12 col-md-6 pe-md-2 mb-2 mb-md-0">
                  <input class="form-control" type="text" placeholder="Date">
                </div>
                <div class="col-12 col-md-6 ps-md-2">
                  <input class="form-control" type="text" placeholder="Time">
                </div>
              </div>
            </dd>
          </div>
        </dl>
        <!-- 提交按钮 -->
        <div class="row">
          <div class="offset-md-2 col-md-10">
            <button type="submit" class="btn btn-primary" id="button1">
              Reserve
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md"></div>
</div>

调整后桌面端会呈现左标签、右控件的两栏布局，单选按钮横排、日期时间输入框并排，按钮和右侧控件对齐；移动端自动切换为标签在上、控件在下的堆叠布局，和预期效果完全一致。

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