代码之家 › 专栏 › 技术社区 › James A Mohler Nika

带引导Vue的垂直间距

bootstrap-vue bootstrap-4

2

James A Mohler Nika · 技术社区 · 6 年前

我正在使用

<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 />  B按钮之后

或

把它放在桌子上。

1 回复 | 直到 6 年前

1

5

juzraai 6 年前

我将在行的底部添加一些边距。使用引导程序可以很容易地实现这一点 spacing classes 喜欢 mb-1 … mb-5 ( m 代表 margin , b 表示底部,数字是引导程序中定义的边距大小):

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