Bootstrap form-group CSS 类究竟做了什么？答案

【问题标题】：What exactly does the Bootstrap form-group CSS class do?Bootstrap form-group CSS 类究竟做了什么？
【发布时间】：2019-10-29 08:24:54
【问题描述】：

我找不到任何关于 Bootstrap“form-group”类做什么的明确文档。有时我会在表单没有按照我想要的格式设置它时添加它，而其他时候我出于同样的原因删除它。有时它会使行之间的间距过大，具体取决于输入元素上使用的类。我通常尝试不使用它，让字段根据其大小（使用的网格单元格）根据需要自动换行。这样可以避免对行中断进行微观管理。

而且它对不同的浏览器品牌和版本以及不同的小部件类型也有不同的作用。例如，在我添加复选框之前，在浏览器版本 X 下可能没问题，但在添加复选框时 just 在版本 X 上表现不同。这种有机的试错会耗费大量的时间“摆弄”。我想知道是否对它的作用和原因没有更严格的解释。这包括“水平”形式和常规形式。

我在 getbootstrap.com 上四处搜索，但没有找到任何具体内容。这是我能找到的最接近“官方”文档。有没有更好的资源？

除了技术信息，我想知道是否有关于名称选择、理念和推荐用法的信息；包括排除场景。换句话说，“form-group”的创建者打算是什么？这可能有助于了解它的用法。

<!-- Typical usage for reference -->
<div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput">
</div>

【问题讨论】：

有趣的是，对于所有关于年轻开发人员的咆哮，解决这个问题并不需要任何“大规模试错”——它只需要你查看引导程序 .css定义/使用.form-group 的文件。无需 AI 工作。

标签： html css twitter-bootstrap

【解决方案1】：

了解form-group 功能的最佳方法是查看source code 或compiled CSS。

在编译后的 CSS 中，form-group 被找到了两次。

1：在表单底部添加边距：

.form-group {
    margin-bottom: 1rem;
}

2：超过 576 像素的屏幕格式：

@media (min-width: 576px) {
  .form-inline label {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 0;
  }
  .form-inline .form-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0;
  }
...

display: flex;
flex: 0 0 auto; 是 flex-grow: 0;、flex-basis: 0; 和 flex-shrink: auto; 的简写。
flex-flow: row wrap; Flex 项目将按行显示并换行。
align-items: center; Flex 项目将在横轴上居中。 CSSTricks 对此有一个tutorial。
margin-bottom: 0; 1rem 的下边距仅在小于 576 像素的屏幕上可见。

【讨论】：