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>

我得到

我想要在每行之间有一些垂直的 space。我可以想到六种方法来做到这一点。但是我想知道应该怎么做？

郑重声明，我最想在 b 按钮

后面放一个 <br /> 

或

把它放在 table.

Answer 1

我会在行的底部添加一些边距。您可以使用 Bootstrap 的 spacing classes 轻松实现此目的，例如 mb-1 .. mb-5（m 代表 margin，b代表bottom，数字是Bootstrap):

中定义的边距大小

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

Bootstrap Vue 的垂直间距

vertical spacing with Bootstrap Vue

bootstrap-4

bootstrap-vue