Bootstrap 表單組 CSS class 到底是做什么的？

Question

我找不到任何關於 Bootstrap “form-group” class 做什么的明確文檔。 有時我會在 forms 的格式不符合我的要求時添加它，而其他時候我出於同樣的原因將其刪除。 有時它會使行之間的間距過大，具體取決於輸入元素上使用的類。 我通常嘗試不使用它，讓字段根據其大小（使用的網格單元格）根據需要自動換行。 這避免了微觀管理行中斷。

而且它對不同的瀏覽器品牌和版本以及不同的小部件類型也有不同的作用。 例如，在我添加復選框之前在瀏覽器版本 X 下可能沒問題，但在我添加復選框時僅在版本 X 上表現不同。 這種有機的試錯會耗費大量的時間“擺弄”。 我想知道是否對它的作用和原因沒有更嚴格的解釋。 這包括“水平”forms 和常規 forms。

我在 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>

Answer 1

找出form-group做什么的最好方法是查看源代碼或編譯的 CSS 。

在編譯出來的CSS中，發現了兩次form-group 。

1：在表單底部添加邊距：

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

2：超過 576px 的屏幕格式：

@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;
  }
...

1. display: flex;
2. flex: 0 0 auto; 是flex-grow: 0; , flex-basis: 0; 和flex-shrink: auto; .
3. flex-flow: row wrap; Flex 項目將按行顯示並換行。
4. align-items: center; Flex 項目將在橫軸上居中。 CSSTricks 對此有一個教程。
5. margin-bottom: 0; 1rem 的下邊距僅在小於 576 像素的屏幕上可見。