L'espace entre Bootstrap 3 boutons

Si j'ai mis plusieurs Bootstrap 3 boutons en une ligne:

    <button class="btn btn-default">Button 1</button>
    <button class="btn btn-default">Button 2</button>
    <button class="btn btn-default">Button 3</button>

il y a un petit espace entre eux. D'où vient-elle et comment l'enlever sans l'aide du flotteur? Selon le Firebug et Chrome Inspecteur, les boutons n'ont aucune marge appliquée.

InformationsquelleAutor Nikola Obreshkov | 2015-05-02
  1. 11

    Le saut de ligne entre les boutons cause de l'espace. Observer:

    HTML:

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<button class="btn btn-default">Button 1</button><button class="btn btn-default">Button 2</button><button class="btn btn-default">Button 3</button>

    Il est un bouton-règle de groupe que vous pouvez utiliser si vous voulez que les boutons regroupées visuellement: http://getbootstrap.com/components/#btn-groups

    HTML:

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

    • Est-il nécessaire pour éviter les nouvelles lignes afin de supprimer cet espace ou il y a un autre moyen?
    • C'est le simple façon, et c'est vrai pour quasiment tous les contrôles que vous voulez de groupe à l'horizontale. Comme je l'ai indiqué dans mon dernier montage, BS a un regroupement de style pour les boutons, si c'est ce que vous êtes après.
    • En fait, si les boutons sont flotté ils n'ont pas de cet espace. Il est présent uniquement quand ils ne sont pas exprimées. Je veux enlever l'espace entre le non-flotté boutons et quand j'applique la marge personnalisée à tous les boutons (flotté et non flotté) pour avoir un espace égal entre alors. Maintenant, grâce à votre réponse, je ne sais comment y parvenir.
    InformationsquelleAutor Tieson T.
  2. 3

    Je crois que vous le style de vos boutons display:inline-block; ou inline. Par défaut, ils créent des espaces si vous avez le caractère de saut de ligne.

    Donc de l'enlever, mettre ces balises uns à côté des autres sans retour à la ligne char.
    Il serait gênant, mais obtiendrez ce que vous voulez sans avoir un style float

    Donc faire comme ceci :

    <button class="btn btn-default">Button 1</button><button class="btn btn-default">Button 2</button><button class="btn btn-default">Button 3</button>
    InformationsquelleAutor David Escudero