如何在Bootstrap中对齐1-2列表单元素与其余表单

问题描述 #

我正尝试让一行包含两个表单元素的区域和表单其余部分对齐，但未成功。

当前显示效果：

期望显示效果（“Genel açıklamalar”部分为正确对齐示例）：

使用的HTML代码（基于Angular框架 + Bootstrap 5）：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div class="container mt-5">
  <div class="row">
    <div class="col-xs-2">
      <strong><div class="text-danger">Makam Olur Tarihi</div></strong>
    </div>
    <div class="col-lg-4">
      <input type="date" name="prmMakamOlurTarihi" class="form-control m-input" #searchDate>
    </div>
    <div class="col-xs-3">
      <strong><div class="text-danger">Rapor Tarihi</div></strong>
    </div>
    <div class="col-lg-3">
      <input type="date" name="prmRaporTarihi" class="form-control m-input" #searchDate>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-6">
      <div class="col-xs-4">
        <label style="text-align: left;"><strong>Genel Açıklamalar</strong></label>
      </div>
      <div class="col-lg-8">
        <textarea name="textarea" maxlength="500" class="form-control m-input"></textarea>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="row">
        <div class="col-xs-6">
          <strong>Raporu Düzenleyen Kişi</strong>
        </div>
        <div class="col-lg-6">
          <input name="prmRaporuDuzenleyenKisi" class="form-control m-input" maxlength="20" />
        </div>
      </div>
      <div class="row">
        <div class="col-xs-6">
          <strong>Raporu Düzenleyen Kişinin Ünvanı</strong>
        </div>
        <div class="col-lg-6">
          <input name="prmRaporuDuzenleyenKisininUnvani" maxlength="20" class="form-control m-input" />
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

问题原因 #

1. Bootstrap 5已废弃col-xs-*类，应使用col-*替代
2. 第一行的列宽度比例与下方表单区域不一致，导致对齐错位
3. 标签未设置垂直居中，与输入框高度不匹配

修改后的代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div class="container mt-5">
  <!-- 修正后的日期行 -->
  <div class="row mb-3">
    <div class="col-lg-6">
      <div class="row align-items-center">
        <div class="col-4">
          <strong><div class="text-danger">Makam Olur Tarihi</div></strong>
        </div>
        <div class="col-8">
          <input type="date" name="prmMakamOlurTarihi" class="form-control m-input" #searchDate>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="row align-items-center">
        <div class="col-4">
          <strong><div class="text-danger">Rapor Tarihi</div></strong>
        </div>
        <div class="col-8">
          <input type="date" name="prmRaporTarihi" class="form-control m-input" #searchDate>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-6">
      <div class="row align-items-center">
        <div class="col-4">
          <label><strong>Genel Açıklamalar</strong></label>
        </div>
        <div class="col-8">
          <textarea name="textarea" maxlength="500" class="form-control m-input"></textarea>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="row mb-3 align-items-center">
        <div class="col-6">
          <strong>Raporu Düzenleyen Kişi</strong>
        </div>
        <div class="col-6">
          <input name="prmRaporuDuzenleyenKisi" class="form-control m-input" maxlength="20" />
        </div>
      </div>
      <div class="row align-items-center">
        <div class="col-6">
          <strong>Raporu Düzenleyen Kişinin Ünvanı</strong>
        </div>
        <div class="col-6">
          <input name="prmRaporuDuzenleyenKisininUnvani" maxlength="20" class="form-control m-input" />
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

关键修改点 #

• 用col-*替代col-xs-*，适配Bootstrap 5的断点规则
• 给所有包含标签和输入框的row添加align-items-center类，实现垂直居中对齐
• 将第一行的两个日期输入区域拆分为col-lg-6的两列，每列内部用row和col-4/col-8的比例，与下方“Genel açıklamalar”的布局保持一致
• 添加mb-3类给行元素，保持统一的间距

内容的提问来源于stack exchange，提问作者Tim's