Bootstrap 4 如何在引导中添加卡片组行之间的间距

我固定了每列的大小，以便每行始终有4个牌组项目，并且当一行中有4个以上的牌组项目时，牌组会自动转到下一行。但是两行之间的间距非常小，看起来好像是重叠的。由于我是新手，我不知道如何增加它们之间的间距。我试着用保证金，但没用。
这是我的卡片组代码

<div class="card-deck">
    @foreach ($animes as $anime)
        <div class="col-sm-3">
        <div class="card h-100">
            <img class="card-img-top" src="/storage/cover_images/{{$anime->cover_image}}" alt="{{$anime->name}}">
            <div class="card-body">
                <p class="card-text text-center"> <strong>{{$anime->name}}</strong></p>
            </div>
            <a class="card-footer btn btn-primary bg-primary" href="/shows/{{$anime->id}}"> Explore </a>
        </div>
        </div>
    @endforeach
</div>

@foreach（$animes作为$anime）
封面图片}“alt=“{{$anime->name}}>
{{$anime->name}
<div class="card-deck">
    @foreach ($animes as $anime)
        <div class="col-sm-3">
        <div class="card h-100">
            <img class="card-img-top" src="/storage/cover_images/{{$anime->cover_image}}" alt="{{$anime->name}}">
            <div class="card-body">
                <p class="card-text text-center"> <strong>{{$anime->name}}</strong></p>
            </div>
            <a class="card-footer btn btn-primary bg-primary" href="/shows/{{$anime->id}}"> Explore </a>
        </div>
        </div>
    @endforeach
</div>

@endforeach

您只需在

col-sm-3

中添加一些边距即可。然后您可以定义它们之间的间距：

<div class="card-deck">
    @foreach ($animes as $anime)
        <div class="col-sm-3">
        <div class="card h-100">
            <img class="card-img-top" src="/storage/cover_images/{{$anime->cover_image}}" alt="{{$anime->name}}">
            <div class="card-body">
                <p class="card-text text-center"> <strong>{{$anime->name}}</strong></p>
            </div>
            <a class="card-footer btn btn-primary bg-primary" href="/shows/{{$anime->id}}"> Explore </a>
        </div>
        </div>
    @endforeach
</div>

.col-sm-3 {
  /*enter the space here:*/
  margin-top:20px;
}

或者创建自己的类，如果不想修改整个项目的类，则可以在其中定义空间：

<div class="card-deck">
    @foreach ($animes as $anime)
        <div class="col-sm-3">
        <div class="card h-100">
            <img class="card-img-top" src="/storage/cover_images/{{$anime->cover_image}}" alt="{{$anime->name}}">
            <div class="card-body">
                <p class="card-text text-center"> <strong>{{$anime->name}}</strong></p>
            </div>
            <a class="card-footer btn btn-primary bg-primary" href="/shows/{{$anime->id}}"> Explore </a>
        </div>
        </div>
    @endforeach
</div>

.someClass {
  /*enter the space here:*/
  margin-top:20px;
}

...
<div class="col-sm-3 someClass">
...

.someClass{
/*在此处输入空格：*/
边缘顶部：20px；
}
...
...

看看这把小提琴：

---

您可以覆盖主引导样式（不编辑实际的源代码），以便每张卡都有底部或顶部的边距

<div class="card-deck">
    @foreach ($animes as $anime)
        <div class="col-sm-3">
        <div class="card h-100">
            <img class="card-img-top" src="/storage/cover_images/{{$anime->cover_image}}" alt="{{$anime->name}}">
            <div class="card-body">
                <p class="card-text text-center"> <strong>{{$anime->name}}</strong></p>
            </div>
            <a class="card-footer btn btn-primary bg-primary" href="/shows/{{$anime->id}}"> Explore </a>
        </div>
        </div>
    @endforeach
</div>

.card {
    margin-bottom: 1em;
}

创建自己的风格也很好，但我不会编辑

col-sm-3

，因为这将是一个通用的项目更改，以后可能会遇到问题

<div class="card-deck">
    @foreach ($animes as $anime)
        <div class="col-sm-3">
        <div class="card h-100">
            <img class="card-img-top" src="/storage/cover_images/{{$anime->cover_image}}" alt="{{$anime->name}}">
            <div class="card-body">
                <p class="card-text text-center"> <strong>{{$anime->name}}</strong></p>
            </div>
            <a class="card-footer btn btn-primary bg-primary" href="/shows/{{$anime->id}}"> Explore </a>
        </div>
        </div>
    @endforeach
</div>

此外，如果您想使用bootstrap中的另一个内置间距实用程序，请尝试使用以下命令编辑html：

<div class="card-deck">
    @foreach ($animes as $anime)
        <div class="col-sm-3">
        <div class="card h-100">
            <img class="card-img-top" src="/storage/cover_images/{{$anime->cover_image}}" alt="{{$anime->name}}">
            <div class="card-body">
                <p class="card-text text-center"> <strong>{{$anime->name}}</strong></p>
            </div>
            <a class="card-footer btn btn-primary bg-primary" href="/shows/{{$anime->id}}"> Explore </a>
        </div>
        </div>
    @endforeach
</div>

.mb-1

，

.mb-2

，…，

.mb-5

（填充也适用于填充）。只需选择间距属性（m或p表示边距或填充），选择边/方向（t或b表示顶部或底部），以及大小（1-5和自动）

<div class="card-deck">
    @foreach ($animes as $anime)
        <div class="col-sm-3">
        <div class="card h-100">
            <img class="card-img-top" src="/storage/cover_images/{{$anime->cover_image}}" alt="{{$anime->name}}">
            <div class="card-body">
                <p class="card-text text-center"> <strong>{{$anime->name}}</strong></p>
            </div>
            <a class="card-footer btn btn-primary bg-primary" href="/shows/{{$anime->id}}"> Explore </a>
        </div>
        </div>
    @endforeach
</div>

文件：

<div class="card-deck">
    @foreach ($animes as $anime)
        <div class="col-sm-3">
        <div class="card h-100">
            <img class="card-img-top" src="/storage/cover_images/{{$anime->cover_image}}" alt="{{$anime->name}}">
            <div class="card-body">
                <p class="card-text text-center"> <strong>{{$anime->name}}</strong></p>
            </div>
            <a class="card-footer btn btn-primary bg-primary" href="/shows/{{$anime->id}}"> Explore </a>
        </div>
        </div>
    @endforeach
</div>

HTML示例（向

卡添加
mb-4
）：

<div class="card-deck">
    @foreach ($animes as $anime)
        <div class="col-sm-3">
        <div class="card h-100">
            <img class="card-img-top" src="/storage/cover_images/{{$anime->cover_image}}" alt="{{$anime->name}}">
            <div class="card-body">
                <p class="card-text text-center"> <strong>{{$anime->name}}</strong></p>
            </div>
            <a class="card-footer btn btn-primary bg-primary" href="/shows/{{$anime->id}}"> Explore </a>
        </div>
        </div>
    @endforeach
</div>


@foreach（$animes作为$anime）
封面图片}“alt=“{{$anime->name}}>
{{$anime->name}
<div class="card-deck">
    @foreach ($animes as $anime)
        <div class="col-sm-3">
        <div class="card h-100">
            <img class="card-img-top" src="/storage/cover_images/{{$anime->cover_image}}" alt="{{$anime->name}}">
            <div class="card-body">
                <p class="card-text text-center"> <strong>{{$anime->name}}</strong></p>
            </div>
            <a class="card-footer btn btn-primary bg-primary" href="/shows/{{$anime->id}}"> Explore </a>
        </div>
        </div>
    @endforeach
</div>

@endforeach

这将在您的卡片底部添加边距。我个人使用边距底部，但这取决于您。
您只需使用Bootstrap提供的Margin-Bottom-3

<div class="card-deck">
    @foreach ($animes as $anime)
        <div class="col-sm-3">
        <div class="card h-100">
            <img class="card-img-top" src="/storage/cover_images/{{$anime->cover_image}}" alt="{{$anime->name}}">
            <div class="card-body">
                <p class="card-text text-center"> <strong>{{$anime->name}}</strong></p>
            </div>
            <a class="card-footer btn btn-primary bg-primary" href="/shows/{{$anime->id}}"> Explore </a>
        </div>
        </div>
    @endforeach
</div>

@foreach ($animes as $anime)
    <div class="card mb-3">
    </div>
@endforeach

@foreach（$animes作为$anime）
@endforeach

在卡片组中使用
.col
也是违反直觉的。如果要处理列，请参阅覆盖弹性基础的答案。由于卡片组是传说中的“等高”的替代品，因此使用这种方法也可以消除
.h-100

<div class="card-deck">
    @foreach ($animes as $anime)
        <div class="col-sm-3">
        <div class="card h-100">
            <img class="card-img-top" src="/storage/cover_images/{{$anime->cover_image}}" alt="{{$anime->name}}">
            <div class="card-body">
                <p class="card-text text-center"> <strong>{{$anime->name}}</strong></p>
            </div>
            <a class="card-footer btn btn-primary bg-primary" href="/shows/{{$anime->id}}"> Explore </a>
        </div>
        </div>
    @endforeach
</div>

只有当我移除固定高度的“h-100”时，它才起作用，但我需要每张卡都具有相同的高度。它现在起作用了！！！在col-sm-3中使用margin底层类解决了以下问题。。。
<div class="card-deck">
    @foreach ($animes as $anime)
        <div class="col-sm-3">
        <div class="card h-100">
            <img class="card-img-top" src="/storage/cover_images/{{$anime->cover_image}}" alt="{{$anime->name}}">
            <div class="card-body">
                <p class="card-text text-center"> <strong>{{$anime->name}}</strong></p>
            </div>
            <a class="card-footer btn btn-primary bg-primary" href="/shows/{{$anime->id}}"> Explore </a>
        </div>
        </div>
    @endforeach
</div>