Bootstrap 5表单组，表单行，表单内联不起作用

Question

我正在尝试将我的应用程序从 Bootstrap 4 更新到 Bootstrap 5，但是所有使用表单类的元素，例如 form-group ， form-row ， form-inline 完全破碎。

原文由 Francesco Borzi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

重大变化：为我们的网格系统删除了特定于表单的布局类。使用我们的网格和实用程序而不是 .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;
}

.form-row > .col {
  padding-left: 5px;
  padding-right: 5px;
}

label {
  margin-bottom: 0.5rem;
}

原文由 Francesco Borzi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

TLDR：

1. 将 Bootstrap 4 inline-form 类替换为 flexbox 辅助类： d-flex flex-row align-items-center flex-wrap 。
2. 如果您使用 mr-* 类来分隔表单元素，请将它们替换为等效的 me-* 类（“margin end”）。例如 mr-2 变成 me-2 。同样， ml-* 变为 ms-* （“保证金开始”）。
3. 请参阅 Bootstrap 5 表单文档 以迁移您的输入元素。例如，在选择元素上，v4 中的类 custom-select 变为 v5 中的 form-select 。

完整示例

将下面的 Bootstrap 4 内联形式与 Bootstrap 5 中的完全等效形式进行比较。

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

这是引导程序 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 can be replaced with mb-3 , since it previously applied the property margin-bottom: 1rem which the mb-3 class will do by default as well .
• 表单特定的布局类被删除（ 来源：迁移指南）。 form-row row 。
• 如上所述，可以通过应用以下类重新创建 form-inline ： d-flex flex-row align-items-center flex-wrap 。

希望这可以帮助！

原文由 Matt 发布，翻译遵循 CC BY-SA 4.0 许可协议