Javascript 在添加响应col类后引导4卡空白，将元素包装在div内还是直接添加类？

在bootstrap4中，当我将任何响应列类（如“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>

****
卡片
数
1.
2.

但是，如果我将卡片包装成一个“div”并将上面的类添加到该“div”中，则空格将消失。正如您现在看到的，卡片标题和内容占据了卡片的所有宽度

**
**
卡片
数
1.
2.

为什么会发生这种情况？如何在Bootstrap中知道响应类是否可以直接应用于html元素，或者是否应该首先将元素包装在div中

我在引导文档中找不到上述问题的答案。 例如，在下面的官方文档链接中，“卡片”示例被包装在一个div中，但表单“标签”示例直接被赋予一个类“col-sm-2”，而没有一个封装的“div”

引导卡文档片段

来自标签文档引导的片段

“空白消失了……为什么会出现这种情况？”

因为列具有左/右填充，可以在列之间创建间距（边沟）

这个

在网格布局中，内容必须放在列中

---

因此，卡片和任何其他内容都应该在列中（

col-*

）。好吧，

col-*

与其他类组合的唯一地方是在使用表单时：

Thank@ZimSystem！1-为什么在卡片内容和卡片边框之间添加边距？整张卡片上有一个“col-sm-8”等级。另外，关于这个——“AFAIK，col-*与其他类组合的唯一地方是在使用表单时：”-您的意思是像“col form label”这样的类是组合的类还是“col-”类可以应用于表单中的任何html元素（例如，表单）？为什么应用此类不会在标签及其边框周围显示边距？“为什么在卡片内容和卡片边框之间添加边距？”因为您有

card col-sm-8

而

col-sm-8

正在应用左/右填充，这就是为什么卡片应该在列中的原因。对于表单，它是按标签填充设计的。

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