Bootstrap 5 表单组、表单行、表单内联

Question

我想更新我的应用程序从引导4〜5引导，但都被使用表单类如元素form-group，form-row，form-inline被彻底打破。

Answer 1

如何迁移.inline-form到 Bootstrap 5+

总而言之：

1. 将 Bootstrap 4inline-form类替换为 Flexbox 辅助类：d-flex flex-row align-items-center flex-wrap。
2. 如果您使用该类mr-*来分隔表单元素，请将其替换为等效的me-*类（“边距结束”）。前mr-2变为me-2. 类似地，ml-*变为ms-*（“边距开始”）。
3. 请参阅Bootstrap 5 表单文档来迁移您的输入元素。例如，在 select 元素上，custom-selectv4 中的类将变为form-selectv5 中的类。

完整示例

将下面的 Bootstrap 4 内联表单与 Bootstrap 5 中的完全相同的表单进行比较。

Bootstrap 4 文档中的示例（已修剪）（Codesandbox）。

这是 Bootstrap 4 代码。

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>

Bootstrap 5 中的相同形式（Codesandbox）

<form class="d-flex flex-row align-items-center flex-wrap">
  <label class="my-1 me-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="form-select my-1 me-sm-2 w-auto" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
  </select>

  <div class="form-check my-1 me-sm-2">
    <input type="checkbox" class="form-check-input" id="customControlInline" />
    <label class="form-check-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>

如何处理Bootstrap 5 中已弃用的form-group,form-row和类form-inline

正如其他人提到的，类form-group、form-row和form-inline在 Bootstrap 5 中被删除。以下是它们的替换方法：

• form-group可以替换为mb-3，因为它之前应用了margin-bottom: 1rem该类默认情况下也会执行的mb-3属性。
• 表单特定的布局类被删除（来源：迁移指南）。大多数情况下form-row可以替换为。row
• 如上所述，form-inline可以通过应用以下类来重新创建：d-flex flex-row align-items-center flex-wrap.

希望这可以帮助！

Answer 2

原因是form-group、form-row和form-inline类已在 Bootstrap 5 中删除：

Breaking Dropped form-specific layout classes for our grid system。使用我们的网格和实用程序，而不是 .form-group、.form-row 或 .form-inline。

https://getbootstrap.com/docs/5.0/migration/#forms

所以应该使用Grid和Utilities来代替。

...但如果您正在寻找快速解决方案，以下是这些类在 Bootstrap 4 中的工作方式：

.form-group {
  margin-bottom: 1rem;
}

.form-inline .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

label {
  margin-bottom: 0.5rem;
}