Comment puis-je faire de la place entre deux boutons dans la même div?

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

Au moment où les boutons se touchent:

Deux boutons Bootstrap

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

Placez-les dans la btn-toolbar ou dans un autre conteneur, pas dans le btn-group . btn-group les réunit. Plus d’informations sur la documentation Bootstrap.

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

Il suffit de mettre les boutons dans une classe (class = “btn-toolbar”) comme indiqué par frère Miroslav Popovic.Il fonctionne génial.

 

La manière la plus simple dans la plupart des situations est la marge.

Où pouvez-vous faire:

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

OU

 button{ margin: 13px; } 

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

J’ai utilisé le plugin Bootstrap 4 boutons ( https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin ) et ajouté la classe arrondie aux libellés et la classe mx-1 au bouton du milieu pour obtenir le aspect souhaité et sensation de boutons radio séparés. En utilisant la classe btn-toolbar, les cercles des boutons radio apparaissent pour moi, ce qui n’est pas ce que je voulais. J’espère que cela aide quelqu’un.

  

vous devriez utiliser bootstrap v.4

  

J’ai réellement rencontré la même exigence. J’ai simplement utilisé le remplacement CSS comme ceci

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

Si vous utilisez Bootstrap, vous pouvez changer avec un style comme: Si vous ne voulez que sur une seule page, alors les balises head appendont .btn-group btn {margin-right: 1rem;}

Si c’est pour tout le site web append au fichier css

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

   

et définir cette classe comme suit

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