Bootstrap 4中的类行和表单行之间的区别

如何解决Bootstrap 4中的类行和表单行之间的区别

我目前正在使用Bootstrap 4.0.0的项目中工作。

我想知道row和form-row这两个类有什么区别？

解决方法

看看Bootstrap 4.0.0 docs会为我们提供以下信息：

您也可以将.row换成.form-row，这是我们标准网格行的一种变体，它覆盖了更紧凑更紧凑的布局的默认列装订线。

让我们在他们正在使用的.row与.form-row的示例中将其可视化：

或者看看使用的CSS：

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.form-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

总而言之，它仅用于更改表单输入元素之间的间距，以构建更紧凑的布局。结合网格系统可以很好地工作，如第二个示例所示，您可以从链接中检索它。

因此，您需要确定是否要更紧密地放置表单输入元素，并使用适当的类。

Bootstrap 5的Outlook ：Gutters will be introduced可进一步控制这些间距事件的宽度。

祝你好运！