bootstrap-4 - Bootstrap 4 中类 row 和 form-row 的区别

Question

我目前正在从事一个项目，我正在使用 Bootstrap 4.0.0。

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

Answer 1

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

You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.

让我们在他们使用的 .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来控制这些间距事件的宽度。

祝你好运!