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

【问题标题】：Difference between the classes row and form-row in Bootstrap 4Bootstrap 4中类行和表单行之间的区别
【发布时间】：2020-12-27 22:11:42
【问题描述】：

我目前正在做一个使用Bootstrap 4.0.0的项目。

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

【问题讨论】：

标签： bootstrap-4 flexbox row

【解决方案1】：

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

总的来说，它只是用来改变表单输入元素之间的间距，以构建更紧凑的布局。这与网格系统结合使用非常好，如您可以从链接中检索的第二个示例所示。

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

Outlook for Bootstrap 5：Gutters will be introduced 以更多地控制这些间距事件的宽度。

祝你好运！

【讨论】：