bootstrap-4 - 如何在 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>

标签： bootstrap-4

Answer 1

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