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 键之后

或者

把它放在一张 table 上。

Answer 1

我会在行的底部添加一些边距。您可以使用 Bootstrap 的 spacing classes 轻松实现这一点。喜欢 mb-1 .. mb-5 ( m 代表 margin ， b 代表底部，数字是Bootstrap中定义的边距大小):

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