当另一个字段有反馈时，为啥 bootstrap-4 输入组会拉伸？

Posted 2023-05-06

【中文标题】当另一个字段有反馈时，为啥 bootstrap-4 输入组会拉伸？

【英文标题】：Why are bootstrap-4 input groups stretching when another field has feedback?当另一个字段有反馈时，为什么 bootstrap-4 输入组会拉伸？

【发布时间】：2019-06-28 15:05:39

【问题描述】：

我有一个可以在一行中包含多个输入组的表单。我正在尝试使用无效反馈（类）来提供表单反馈，但是当我这样做时，相邻字段会垂直拉伸。下面的代码是一个简单的 2 行和 2 个输入的示例，显示了当右列中有反馈时左列是如何被拉伸的。非常感谢您对此的帮助。

<div class="container mt-3">
  <div class="row">
    <div class="input-group mb-3 col-6">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">First:</span>
      </div>
      <input type="text" class="form-control" placeholder="First" aria-label="First" aria-describedby="basic-addon1">
      <div class="invalid-feedback">Should not show</div>
    </div>
    <div class="input-group mb-3 col-6">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon2">Second:</span>
      </div>
      <input type="text" class="form-control is-invalid" placeholder="Second" aria-label="Second" aria-describedby="basic-addon2">
      <div class="invalid-feedback">Some text</div>
    </div>
    <div class="input-group mb-3 col-6">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon3">Third:</span>
      </div>
      <select class="form-control" id="exampleFormControlSelect1" aria-describedby="basic-addon3">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
      <div class="invalid-feedback">Should not show</div>
    </div>
    <div class="input-group mb-3 col-6">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon4">Fourth:</span>
      </div>
      <input type="text" class="form-control is-invalid" placeholder="Fourth" aria-label="Fourth" aria-describedby="basic-addon4">
      <div class="invalid-feedback">Some other text</div>
    </div>
  </div>
</div>

jsfiddle:https://jsfiddle.net/8e2uo4jL/

【参考方案1】：

我不知道这是否是您需要的，但您应该使用 align-self-start 并启用 d-flex ：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-3">
  <div class="row">
    <div class="input-group mb-3 col-6 align-self-start d-flex">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">First:</span>
      </div>
      <input type="text" class="form-control" placeholder="First" aria-label="First" aria-describedby="basic-addon1">
      <div class="invalid-feedback">Should not show</div>
    </div>
    <div class="input-group mb-3 col-6">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon2">Second:</span>
      </div>
      <input type="text" class="form-control is-invalid" placeholder="Second" aria-label="Second" aria-describedby="basic-addon2">
      <div class="invalid-feedback">Some text</div>
    </div>
    <div class="input-group mb-3 col-6 align-self-start d-flex">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon3">Third:</span>
      </div>
      <select class="form-control" id="exampleFormControlSelect1" aria-describedby="basic-addon3">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
      <div class="invalid-feedback">Should not show</div>
    </div>
    <div class="input-group mb-3 col-6">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon4">Fourth:</span>
      </div>
      <input type="text" class="form-control is-invalid" placeholder="Fourth" aria-label="Fourth" aria-describedby="basic-addon4">
      <div class="invalid-feedback">Some other text</div>
    </div>
  </div>
</div>

【讨论】：

为什么要使用 align-self-start 和 d-flex？首先，这行得通。太棒了，谢谢！但我很好奇是否有使用这些的最佳实践理由？我对 bootstrap 比较陌生，想尽我所能学习。

align-self 允许您单独对齐您的项目。 d-flex 是将display: flex; 添加到您的项目的类。您应该参考 B4 文档了解更多信息：getbootstrap.com/docs/4.2/utilities/flex/#align-self