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

2023-09-04 02:13:38 作者:老污婆

我正在尝试将我的应用程序从Bootstrap 4更新到Bootstrap 5,但使用表单类的所有元素(如form-groupform-rowform-inline)都完全损坏。

推荐答案

原因是form-groupform-rowform-inline类已在引导5中删除:

逐浪CMS系统中的表单功能为你解决一切表单问题

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