如何在引导程序中的卡片组的行之间增加间距 [英] How do I add spacing between rows of a card-deck in bootstrap

问题描述

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

I fixed the size of each columns so that there's always 4 deck-items per row and the card-deck automatically goes to the next row whenever there is more than 4 deck-items in the row. But the spacing between two rows are very small and it looks like as if they are overlapping. As I am new to bootstrap I cant figure out how to add spacing between them. I tried to use margin but it didnt worked.
This is my code for 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>

推荐答案

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

You can override the main Bootstrap styles (don't edit the actual source code) so that each card has a margin bottom or top.

.card {
    margin-bottom: 1em;
}

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

Creating your own style is fine too but, I would not edit the col-sm-3 because that would be a universal project change and you can run into issues later on.

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

.mb-1 ， .mb-2 ，...， .mb-5 (对于填充同样有效).您要做的就是选择一个间距属性(m或p表示边距或填充)，选择一个侧面/方向(t或b表示顶部或底部)，以及尺寸(1-5和自动).

.mb-1, .mb-2, ... , .mb-5 (same works for padding). All you have to do is choose a spacing property (m or p for margin or padding), choose a side/direction (t or b for top or bottom), and the size (1-5 and auto).

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

HTML示例(将 mb-4 添加到您的 card ):

HTML example (adding mb-4 to your 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>

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

This will add a margin to the bottom of your card. I personally use margin bottom but it's up to you.

这篇关于如何在引导程序中的卡片组的行之间增加间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！