Question

在Bootstrap 4中，当我添加任何响应列类时，例如＆＃34; col-sm-8＆＃34;直接到＆＃34; div＆＃34;如同类和＃34;卡＆＃34;，卡边框和内容之间添加了一些空格（在下图中以黄色突出显示）。

代码如下：

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

但是，如果我将卡片包裹在＆＃34; div＆＃34;并将上面的类添加到＆＃34; div＆＃34;，空格消失。正如您现在所看到的，卡片标题和内容占据了卡片的所有宽度。

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

我在bootstrap文档中找不到上面的答案。例如，在下面的官方文档链接中，＆＃34; card＆＃34;示例包含在div中，但形式为＆＃34; label＆＃34;示例直接给出了一个类＆＃34; col-sm-2＆＃34;没有附上＆＃34; div＆＃34;。

来自Bootstrap卡文档的

代码段 https://getbootstrap.com/docs/4.0/components/card/

标签文档中的Bootstrap片段 https://getbootstrap.com/docs/4.0/components/forms/

Answer 1

“空白消失了......为什么会这样？”

因为列具有左/右填充，这会在列之间创建间距（gutter）。

documentation states ...

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

因此，该卡和任何其他内容应 in 列（public interface CashierRepository extends CrudRepository<Cashier, Integer>{ List<Cashier> findAllByOrderByCashiergrouping(); Cashier findFirstBy(); }）。 AFAIK，仅将col-*与其他类结合使用的形式是：https://getbootstrap.com/docs/4.0/components/forms/#form-grid

添加响应col类后，引导4卡空白区域，在div中包装元素或直接添加类？

1 个答案: