在添加響應式col類，將元素包裝在div中還是直接添加類之后，引導4卡空白？

Question

在Bootstrap 4中，當我將任何響應列類（例如“ col-sm-8”）直接添加到具有“ card”類的“ div”中時，在卡的邊框和內容之間添加了一些空格（下面以黃色突出顯示）圖片）。

代碼如下：

<div class="row">
            <div class="col-sm-2">
            </div>
            **<div class="card col-sm-8">**
                <h3 class="card-header bg-primary text-white">Card...</h3>
                <div class="card-block">
                    <form>
                        <div class="form-group row">
                            <div class="col-sm-2">Number</div>
                            <div class="col-sm-6">
                                <input type="radio" class="col-sm-1" name="numGuests" id="numGuests1" value="1">
                                <label for="numGuests" class="">1</label>
                                <input type="radio" class="col-sm-1" name="numGuests" id="numGuests2" value="2">
                                <label for="numGuests" class="col-form-label">2</label>

                            </div>
                        </div>
                    </form>
                </div>
            </div>

但是，如果我將卡包裝在“ div”中，然后將上述類添加到該“ div”中，則空格消失了。 如您現在所見，卡頭和內容占據了卡的所有寬度。

<div class="row">
            <div class="col-sm-2">
            </div>
            **<div class="col-sm-8">
                <div class="card">**
                    <h3 class="card-header bg-primary text-white">Card...</h3>
                    <div class="card-block">
                        <form>
                            <div class="form-group row">
                                <div class="col-sm-2">Number</div>
                                <div class="col-sm-6">
                                    <input type="radio" class="col-sm-1" name="numGuests" id="numGuests1" value="1">
                                    <label for="numGuests" class="">1</label>
                                    <input type="radio" class="col-sm-1" name="numGuests" id="numGuests2" value="2">
                                    <label for="numGuests" class="col-form-label">2</label>

                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

為什么會發生這種情況？ 如何在Bootstrap中知道響應式是否可以直接應用於html元素，或者該元素是否應首先包裝在div中？

我在引導文檔中找不到上述答案。 例如，在下面的官方文檔鏈接中，“ card”示例被包裝在div內，但是形式“ label”示例被直接賦予了類“ col-sm-2”，而沒有包含“ div”。

Bootstrap卡文檔的摘錄 https://getbootstrap.com/docs/4.0/components/card/

標簽文檔 https://getbootstrap.com/docs/4.0/components/forms/中 Bootstrap的片段