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

【问题标题】：Bootstrap 5 form-group, form-row, form-inline not workingBootstrap 5表单组，表单行，表单内联不起作用
【发布时间】：2021-08-11 18:09:57
【问题描述】：

我正在尝试将我的应用从 Bootstrap 4 更新到 Bootstrap 5，但是所有使用表单类的元素（例如 form-group、form-row、form-inline）都完全损坏了。

【问题讨论】：

标签： css twitter-bootstrap bootstrap-5

【解决方案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;
}

label {
  margin-bottom: 0.5rem;
}

【讨论】：

从这个答案推断，您还可以在任何表单控件上应用类 d-inline-block 和 w-auto 以实现表单内联效果。
@Francesco Borzi - 您添加的 css 类（form-group、form-inline 等）将在 Bootstrap 5 环境中模拟它们？希望您可以添加更多...这将大大有助于迁移到 v5 ...
是的，他们在 Boostrap 5 环境中模拟它们。从 v4 迁移到 v5 后，我正在将它们用于这个项目：github.com/azerothcore/Keira3我目前不打算添加更多类
但是哪些网格和实用程序类？
@OrangeDog 希望他们在迁移指南中提供最接近的等价物。根据这个答案，看起来 .form-group 大致相当于 mb-3: .mb-3 { margin-bottom: 1rem !important; }

【解决方案2】：

因为在 Bootstrap 5 中移除了 form-group、form-row 和 form-inline 类： 我已经求助于使用 gy-。例如（gy-2）

<div class="card">
   <div class="card-body">
       <div class="row">
           <div class="col-lg-2 gy-2">
               <select class="form-control">
                   <option>invoice</option>
                   <option>qoutation</option>
               </select>
           </div>
           <div class="col-lg-2 gy-2">
               <select class="form-control product-select" name="state">
                   <option value="AL">Search Product..</option>
               </select>
           </div>
       </div>
   </div>
</div>

【讨论】：