织梦狗教程 / 编程问答 / 前端问题 / 正文

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

织梦狗教程前端问题

2022-09-05

Bootstrap 5 form-group, form-row, form-inline not working(Bootstrap 5表单组、表单行、内联表单不起作用)

本文介绍了Bootstrap 5表单组、表单行、内联表单不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

推荐答案

原因是form-group、form-row和form-inline类已在引导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;
}

这篇关于Bootstrap 5表单组、表单行、内联表单不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！