Bootstrap5表单组、表单行、表单内联

html5 • • 问答

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

回答

原因是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;
}

以上是Bootstrap5表单组、表单行、表单内联的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>