标签对齐。一样高。 Bootstrap 4 - 表单答案

【问题标题】：Label alignment. Same height. Bootstrap 4 - Forms标签对齐。一样高。 Bootstrap 4 - 表单
【发布时间】：2021-02-21 12:48:30
【问题描述】：

使用 Bootstrap 4 / Forms：如果 同一表单行中的其他标签很长，是否有任何简单的方法可以对齐标签？

https://jsfiddle.net/fekula/tL1afnqj/4/

示例：

标签对齐错误

正确对齐

<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email</label>

谢谢。

【问题讨论】：

标签： css forms twitter-bootstrap bootstrap-4 label

【解决方案1】：

像这样用form-row添加align-items-end类- <div class="form-row align-items-end">见下例

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<form class="p-5">
  <div class="form-row align-items-end">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

【讨论】：

太棒了！