我如何在Bootstrap按钮和表之间创建空间

Question

我只是刚刚学习了Bootstrap。我要保持我的代码简洁明了，并希望遵循最佳实践。我正在尝试在按钮和表格之间创建一个空间，因为目前按钮正对着表格的顶部，而且看起来不太好。我已经尝试使用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>

Answer 1

您想要的类是“ mb-2”，而不是“ mb2”。请参阅此引导指南https://getbootstrap.com/docs/4.4/utilities/spacing/

Answer 2

第一个解决方案是在其中一些中添加边距，即Update-右边距，或者Delete-左边距。例如：

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

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

Answer 3

您在类名--中缺少mb-2。通常，使用magrin还是可行的，mb-1的边际很小（假设您没有更改任何默认的引导程序变量）。要查看更改，我将使用更大的值，以便能够在页面上标识它们，例如mb-3或mb-5。