0
votes

Comment créer un espace entre les boutons de bootstrap et la table

 SPACING BOOTSTRAP entre les boutons et la table

Je viens d'apprendre seulement bootstrap. Je dois garder mon code propre et simple, et je voudrais garder aux meilleures pratiques. J'essaie de créer un espace entre les boutons et la table, car au moment où les boutons sont à la hauteur du haut de la table et que cela n'a pas l'air bien. J'ai essayé d'utiliser MB1 et PB1 mais NOTHINGS TRAVAILLER. P>

<!-- 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>


1 commentaires

Il existe différentes techniques. Ajoutez simplement un élément div avec une hauteur de points comme

.


3 Réponses :


0
votes

La première solution consisterait à ajouter de la marge à certaines d'entre elles, à la mise à jour - marge droite ou à la marge gauche. Par exemple:

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


0 commentaires

1
votes

La classe que vous voulez est "MB-2", pas "MB2". Voir ce guide boottap https://getbootstrap.com/docs/4.4/uties/spacing/ < / a>


0 commentaires

0
votes

Il vous manque le - dans le nom de la classe - MB-2 . Et dans General Magrins, c'est la voie à suivre, MB-1 est une très petite marge (en supposant que vous ne modifiez pas de variables de bottestrap par défaut). Pour voir les modifications, j'irais avec des valeurs plus grandes afin de pouvoir les identifier sur la page, quelque chose comme MB-3 ou MB-5 .


0 commentaires