Bootstrap 4 如何在引导按钮和表之间创建空间

我刚刚学会了引导。我希望我的代码保持干净和简单，并希望保持最佳实践。我试图在按钮和桌子之间创造一个空间，因为目前按钮正好靠在桌子的顶部，看起来不太好。我试过使用mb1和pb1，但都没用

<!-- Show Expenses Card -->
<div class="card mt-4">
    <div class="card-header">
    Expense {{id}}
    </div>
    <div class="card-body">

        {% if not data_integrity %}
            <div class="alert alert-danger" role="alert">
                This expense has data Integrity issues!
            </div>
        {% endif %}

        <div class='mb2'><!-- mb2 is for spacing and isn't work. Pls fix. -->
            <a class="btn btn-primary" href="#" role="button">Update</a>
            <a class="btn btn-primary" href="#" role="button">Delete</a>
        </div>

        <table class="table mt2"><!-- mt2 is for spacing and isn't work. Pls fix. -->
            <tbody>
                <tr>
                    <th scope="row">Date</th>
                    <td>{{journal_entry.date}}</td>
                </tr>
                <tr>
                    <th scope="row">Account</th>
                    <td>{{ journal_entry.lineitem_set.all.1.ledger }}</td>
                </tr>
                <tr>
                    <th scope="row">Expense</th>
                    <td>{{ journal_entry.lineitem_set.all.0.ledger }}</td>
                </tr>
                <tr>
                    <th scope="row">Project</th>
                    <td>{{ journal_entry.lineitem_set.all.0.project }}</td>
                </tr>
                <tr>
                    <th scope="row">Store</th>
                    <td>{{ journal_entry.lineitem_set.all.1.description }}</td>
                </tr>
                <tr>
                    <th scope="row">Description</th>
                    <td>{{ journal_entry.lineitem_set.all.0.description }}</td>
                </tr>
                <tr>
                    <th scope="row">Amount</th>
                    <td>{{ journal_entry.lineitem_set.all.0.dr }}</td>
                </tr>
                <tr>
                    <th scope="row">Created by</th>
                    <td>{{ journal_entry.user }}</td>
                </tr>
                <tr>
                    <th scope="row">Data Integrity</th>
                    <td>{{ data_integrity }}</td>
                </tr>
            </tbody>
        </table>

    </div>
</div>

---

第一种解决方案是为其中一些添加边距、更新右边距或删除左边距。例如：

<a class="btn btn-primary mr-4" href="#" role="button">Update</a>

---

还有许多其他解决方案可用，包括插入附加元素、滥用等。

您想要的类是mb-2，而不是mb2。

---

请参阅本引导指南

类名中缺少-mb-2。一般来说，magrin是可行的，假设您没有更改任何默认引导变量，mb-1是一个非常小的余量。要查看更改，我会使用更大的值，以便能够在页面上识别它们，比如mb-3或mb-5

有不同的技术。只需添加一个div元素，其中的一些点高度如下。