标签对齐。一样高。 Bootstrap 4 - 表格

Question

使用Bootstrap 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>

谢谢。

Answer 1

像这样用 form-row 添加 align-items-end class - <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>

标签对齐。一样高。 Bootstrap 4 - 表格

Label alignment. Same height. Bootstrap 4 - Forms

css

forms

label

twitter-bootstrap

bootstrap-4