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 ボタンの後に aを置きたいと思っています。

また

テーブルに入れます。

Answer 1

行の下部にマージンを追加します。..のようなBootstrap のスペーシング クラスを使用して、これを簡単に実現できます(を表し、下を表し、数値は Bootstrap で定義されているマージンのサイズです)。mb-1mb-5mmarginb

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