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按钮之后加上a

要么

放在桌子上

Answer 1

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

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