原因是 form-group , form-row ,以及 form-inline Bootstrap 5中的类已被删除:

重大变化:删除了我们网格系统的特定于表单的布局类。使用我们的网格和实用程序,而不是.form组、.form行或.form内联。

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;
}

如何迁移 .inline-form Bootstrap 5+

太长,读不下去了

1. 替换Bootstrap 4 inline-form 类与flexbox辅助类: d-flex flex-row align-items-center flex-wrap .
2. 如果你使用 mr-* 类来分隔表单元素,将其替换为等效项 me-* 类(“边缘端”)。E.x。 mr-2 成为 me-2 同样地, ml-* 成为 ms-* (“保证金开始”)。
3. 请咨询 Bootstrap 5 form documentation 迁移您的输入元素。例如,在select元素上,类 custom-select 在v4中变为 form-select 在v5中。

完整示例

将下面的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>

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

正如其他人所提到的,这些课程 表格组 , 表格行 和 表单内联 在Bootstrap 5中被删除。以下是如何替换它们:

• 表格组 可以替换为 mb-3 ,因为它之前应用了该属性 margin-bottom: 1rem 哪一个 mb-3 班 will do by default as well .
• 表单特定的布局类被删除( source: Migration guide ). 表格行 可以替换为 row 在大多数情况下。
• 如上所述, 表单内联 可以通过应用以下类来重新创建: d-flex柔性行对齐项目中心柔性包裹 .

希望这能有所帮助!

修复比这更容易。把所有的行都包起来 <div class="grid"> ,然后更改 class="form-row" 到 class="row" ,并转换 class="form-group col-md-3" (例如) class="col-md-3" .

因为Bootstrap 5中删除了表单组、表单行和表单内联类: 我不得不使用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>