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>
3 Réponses :
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>
La classe que vous voulez est "MB-2", pas "MB2". Voir ce guide boottap https://getbootstrap.com/docs/4.4/uties/spacing/ < / a> p>
Il vous manque le - code> dans le nom de la classe -
MB-2 code>. Et dans General Magrins, c'est la voie à suivre,
MB-1 Code> 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 code> ou
MB-5 code>. p>
Il existe différentes techniques. Ajoutez simplement un élément div avec une hauteur de points comme div> code>.