Comment puis-je faire de l'espace entre deux boutons dans le même div?

Quelle est la meilleure façon d'espacer horizontalement les boutons Bootstrap?

Au moment où les boutons se touchent:

<div class="btn-group">
    <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
        <i class="icon-in-button"></i>  
        Add to list
        <span class="caret"/>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">here</a>
        </li>
        <li>
            <a href="#">new</a>
        </li>
    </ul>
    <button class="btn btn-info">
        <i class="icon-in-button"></i>  
        more
    </button>
</div>

jsfiddle montrant le problème: http://jsfiddle.net/hhimanshu/sYLRq/4/

Mettez-les à l'intérieur btn-toolbarou dans un autre récipient, non btn-group. btn-grouples réunit. Plus d'informations sur la documentation Bootstrap .

Edit: La question d'origine était pour Bootstrap 2.x, mais la même chose est toujours valable pour Bootstrap 3 et Bootstrap 4 .

Dans Bootstrap 4, vous devrez ajouter une marge appropriée à vos groupes en utilisant des classes utilitaires, telles que mx-2.

Il suffit de mettre les boutons dans une classe (class = "btn-toolbar") comme l'a dit le frère Miroslav Popovic. Cela fonctionne à merveille.

<div class="btn-toolbar">
  <button type="button" id="btnSubmit" class="btn btn-primary btn-sm">Submit</button>
  <button type="button" id="btnCancel" class="btn btn-primary btn-sm">Cancel</button>
</div>

Vous pouvez utiliser l' espacement pour Bootstrap et vous n'avez pas besoin de CSS supplémentaire. Ajoutez simplement les classes à vos boutons. Ceci est pour la version 4.

vous devriez utiliser bootstrap v.4

<div class="form-group row">
    <div class="col-md-6">
        <input type="button" class="btn form-control" id="btn1">
    </div>
    <div class="col-md-6">
        <input type="button" class="btn form-control" id="btn2">
    </div>
</div>

Ce que Dragan B a suggéré est la bonne façon de procéder pour Bootstrap 4. J'ai mis un exemple ci-dessous. par exemple mr-3 est la marge droite: 1rem! important

<div class="btn-toolbar pull-right">
   <button type="button" class="btn mr-3">btn1</button>
   <button type="button" class="btn mr-3">btn2</button>
   <button type="button" class="btn">btn3</button>
</div>

ps: dans mon cas, je voulais que mes boutons soient affichés à droite de l'écran et donc tirez à droite.

Le moyen le plus simple dans la plupart des situations est la marge.

Où vous pouvez faire:

button{
  margin: 13px 12px 12px 10px;
}

OU

button{
  margin: 13px;
}

J'ai utilisé le plugin Bootstrap 4 boutons ( https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin ) et ajouté la classe arrondie aux étiquettes et la classe mx-1 au bouton du milieu pour atteindre le l'apparence et la sensation souhaitées des boutons radio séparés. L'utilisation de la classe btn-toolbar a fait apparaître les cercles de boutons radio pour moi, ce qui n'est pas ce que je voulais. J'espère que cela aide quelqu'un.

        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-secondary active rounded">
                <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
            </label>
            <label class="btn btn-secondary rounded mx-1">
                <input type="radio" name="options" id="option2" autocomplete="off"> Radio
            </label>
            <label class="btn btn-secondary rounded">
                <input type="radio" name="options" id="option3" autocomplete="off"> Radio
            </label>
        </div>

Une autre façon d'y parvenir est d'ajouter une classe .btn-space dans vos boutons

  <button type="button" class="btn btn-outline-danger btn-space"
  </button>
  <button type="button" class="btn btn-outline-primary btn-space"
  </button>

et définissez cette classe comme suit

.btn-space {
    margin-right: 15px;
}

J'ai rencontré la même exigence. J'ai simplement utilisé le remplacement CSS comme celui-ci

.navbar .btn-toolbar { margin-top: 0; margin-bottom: 0 }

si vous utilisez Bootstrap, vous pouvez changer avec un style comme: Si vous ne voulez qu'une seule page, puis entre les balises head, ajoutez .btn-group btn {margin-right: 1rem;}

Si c'est pour tout le site Web, ajouter au fichier css

La solution de Dragan B. est correcte. Dans mon cas, j'avais besoin que les boutons soient espacés verticalement lors de l'empilement, je leur ai donc ajouté la propriété mb-2.

<div class="btn-toolbar">
   <button type="button" class="btn btn-primary mr-2 mb-2">First</button>
   <button type="button" class="btn btn-primary mr-2 mb-2">Second</button>
   <button type="button" class="btn btn-primary mr-2 mb-2">Third</button>
</div>

J'ai fini par faire quelque chose de similaire à ce que faisait Mark dibe , mais j'avais besoin de déterminer l'espacement d'une manière légèrement différente.

Les col-xclasses dans bootstrap peuvent être une bouée de sauvetage absolue. J'ai fini par faire quelque chose de similaire à ceci:

<div class="row col-12">
    <div class="col-3">Title</div>
</div>
<div class="row col-12">
    <div class="col-3">Bootstrap Switch</div>
<div>

Cela m'a permis d'aligner les titres et les commutateurs d'entrée de manière bien espacée. La même idée peut être appliquée aux boutons et vous permettre d'empêcher les boutons de se toucher.

(Note latérale: je voulais que ce soit un commentaire sur le lien ci-dessus, mais ma réputation n'est pas assez élevée)