Il existe un exemple complet de bouton bootstrap sur le site officiel, mais je ne peux pas comprendre pourquoi il y a un espacement entre les boutons et comment faire de même? Tout outil de débogage du navigateur ne montre rien: il y a des marges de haut et de fond, mais rien sur l'espacement horizontal! Quelqu'un peut-il expliquer?
4 Réponses :
Il suffit d'ajouter dans vos styles quelque chose comme: mais assurez-vous qu'il n'a pas d'impact sur les autres styles que vous avez écrites avant
Cela est dû à leur feuille de style de redémarrage qui styles la documentation que vous consultez.
Si vous retirez un inspecteur de Google Element, ils sont en réalité un total de 2 remplissages marines et 6 px à gauche et à droite des boutons. Cela ne s'appliquera pas aux boutons que vous utilisez dans vos modèles.
Depuis que vous utilisez Bootstrap 4, vous pouvez également ajouter la classe "MR-1" à vos boutons; De cette façon, vous n'avez pas à changer le CSS (sauf si vous ne voulez :)).
L'espacement que vous décrivez est ce qui se passe lorsque vous avez plusieurs P>
affichage: inline-block code> éléments avec le code qui les crée chacun sur leur propre ligne.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<p>These buttons will appear with spacing between them.</p>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<hr />
<p>These buttons will not.</p>
<button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button><button type="button" class="btn btn-success">Success</button>
Cela devrait être un espacement régulier pour les éléments en ligne. Si vous les inspectez, vous verrez qu'ils ont
Affichage: Inline-Block; ... Il suffit de mettre un espace vide entre eux.Quelle version de bootstrap utilisez-vous? 3 ou 4? Lol nevermind, le lien ... Derp.
L'espacement entre les boutons est dû à
Hover événement