Question

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

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

Answer 1

您可以为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/

Answer 2

您可以覆盖主要的Bootstrap样式（不要编辑实际的源代码），以便每张卡的底边或顶边都有空白。

.card {
    margin-bottom: 1em;
}

创建自己的样式也很好，但是，我不会编辑col-sm-3，因为这将是一项普遍的项目更改，以后您可能会遇到问题。

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

.mb-1，.mb-2，...，.mb-5（用于填充的方法相同）。您所要做的就是选择一个间距属性（m或p用于边距或填充），选择一个侧面/方向（t或b用于顶部或底部），以及尺寸（1-5和自动）。

文档：https://getbootstrap.com/docs/4.3/utilities/spacing/

HTML示例（将mb-4添加到您的card）：

<div class="card-deck">
    @foreach ($animes as $anime)
        <div class="col-sm-3">
        <div class="card h-100 mb-4">
            <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>

这将在卡的底部增加边距。我个人使用底部保证金，但这取决于您。

Answer 3

您应该只使用Bootstrap提供的Spacing Utilities。 M 精氨酸- B 底部- 3

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

另外，在卡片组内部使用.col是违反直觉的。如果要处理列，请参见my previous答案以覆盖flex-basis。由于卡片组是传说中的“等高”的替代方案，因此.h-100也可以通过这种方法消除。

DEMO

如何在引导程序中的卡片组的行之间增加间距

3 个答案: