Les marges des boutons dans Bootstrap 3: d'où venaient-ils?

Je suis en train de développer une application Meteor avec le package Bootstrap 3 déjà installé et en essayant de faire une navigation de boutons.Les marges des boutons dans Bootstrap 3: d'où venaient-ils?

J'ai remarqué que les boutons ont de l'espace entre les deux, mais, même si j'ai inspecté, je n'ai pas pu trouver de propriété de style de marge pour le rendre possible.

Comment est-ce possible? D'où viennent ces marges?

Vous pouvez voir et inspecter les boutons même dans le Bootstrap officiel 3 Doc http://getbootstrap.com/css/#buttons

Source

2014-09-17 RobertoPD

Le problème provient de la propriété CSS display:inline block qui force l'espace blanc entre les éléments en ligne. Ce n'est pas un problème spécifique au HTML. Voir cet article de CSS-Tricks pour plus d'informations: http://css-tricks.com/fighting-the-space-between-inline-block-elements/. Une solution de contournement consiste à modifier le code HTML, que @Dan a posté, mais cela vous oblige à rompre la mise en forme HTML standard et un développeur à l'avenir pourrait espacer les choses et casser votre solution.

Quelques corrections CSS doivent utiliser des flottants au lieu de display: inline-block. Vous pouvez également ajouter des marges négatives sur vos boutons pour supprimer cet espace.

Source

2014-09-17 14:45:25 kretzm

C'est de la sémantique, mais je ne suis pas d'accord avec votre commentaire 'Ce n'est pas un problème HTML'. Oui, c'est un problème HTML et c'est aussi un problème CSS. Il pourrait être corrigé en changeant HTML ou CSS ou en utilisant javascript d'ailleurs. Il y a probablement des centaines de corrections possibles. À la fin de la journée, il s'agit à la fois d'un problème HTML et d'un problème CSS. Séparément, votre commentaire que 'display: inline-block' a naturellement de l'espace autour n'a aucun sens - qu'est-ce que cela signifie? – Dan

@Dan juste parce qu'il peut être résolu en HTML ou JavaScript, ne fait pas un problème avec ces langues. Le facteur limitant est la propriété CSS 'display: inline-block'. L'espace vient d'appliquer un style «en ligne» aux éléments, qui, comme le dit l'article, a un espace entre eux par défaut - le plus probable pour la lisibilité entre les éléments en ligne forcés.Le HTML lui-même ne contient aucune propriété stylistique. Si vous utilisiez des balises span au lieu de divs, qui sont naturellement intégrées, et pas de CSS, vous n'auriez pas cet espace. – kretzm

L'article ne dit pas qu'il y a un espace entre eux par défaut. Cette question peut aider aussi bien [Comment faire pour supprimer l'espace entre les éléments inline-block?] (Http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) – Dan

Ce n'est pas la marge, ses espaces réels dans le code HTML.

Si vous placez les boutons sur une seule ligne dans votre code, il n'y aura aucun espacement. Voir this bootply demo pour un exemple de boutons sans espace. Reportez-vous également à cette question How to remove the space between inline-block elements? pour plus d'informations.

Source

2014-09-17 13:47:47 Dan

Ce ne sont pas des espaces dans le HTML, c'est dû à la propriété "display: inline-block" ayant de l'espace autour de lui par nature. Suppression de tout espace dans votre code HTML est une solution de rechange pour cela. Voir: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ Vous pouvez également changer l'affichage: inline-block à floats à la place ce qui supprimerait cet espace. – kretzm

@kretzm Ce sont les espaces dans le HTML. Comme le lien que vous avez fourni dit: 'La raison pour laquelle vous obtenez les espaces est parce que, bien, vous avez des espaces entre les éléments. Les espaces sont affichés en raison du CSS 'inline-block'. – Dan

Oui, mais cela est uniquement dû à l'utilisation de la propriété CSS "display: inline-block", et non du code HTML. Si vous utilisiez des flottants, il n'y aurait pas d'espaces, quel que soit l'espace disponible dans votre code HTML. Je n'aime pas cette solution car elle nécessite de modifier votre code HTML lorsque cela ne devrait pas être pertinent, c'est un problème de CSS. – kretzm

Les marges des boutons dans Bootstrap 3: d'où venaient-ils?

Répondre

Questions connexes