时间戳

首页 > 解决方案 > 如何在引导程序中添加卡片组行之间的间距

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>

标签： bootstrap-4

解决方案

您可以添加一些边距col-sm-3。然后你可以定义它们之间的空间：

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

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

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

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

看看这个小提琴： https ://jsfiddle.net/zdra058w/

推荐阅读