bootstrap-4 - Bootstrap Vue 的垂直间距

Question

我在用

<b-row v-for="reptile in reptiles" :key="reptile.id">
    <b-col>
        {{ reptile.name }} 
    </b-col>

    <b-col>
        <b-button @click="deleteReptile(reptile)" variant="danger" size="sm">
            <i class="fas fa-trash"></i> Trash
        </b-button>
    </b-col>
</b-row>

我得到

我想要每行之间有一些垂直空间。我能想到六种方法。但是我想知道应该怎么做？

为了记录，我最想<br />&nbsp;在 b 按钮之后放一个

或者

把它放在一张桌子上。

Answer 1

我会在行的底部添加一些边距。您可以使用 Bootstrap 的间距类轻松实现这一点，例如mb-1.. mb-5（m代表margin，b代表底部，数字是 Bootstrap 中定义的边距大小）：

<b-row class="mb-2" ...>
    ...
</b-row>