web-dev-qa-db-fra.com

Comment puis-je créer un espace entre deux boutons dans la même div?

Quel est le meilleur moyen d'espacer les boutons Bootstrap horizontalement?

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>

 Two Bootstrap buttons

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

htmlcsstwitter-bootstrap
129
daydreamer

Placez-les dans btn-toolbar ou dans un autre conteneur, pas btn-group. btn-group les réunit. Plus d'infos sur Bootstrap documentation .

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

Dans Bootstrap 4 vous devrez ajouter une marge appropriée à vos groupes à l'aide de classes utilitaires, telles que mx-2.

275
Miroslav Popovic

Il suffit de mettre les boutons dans une classe (class = "btn-toolbar") comme le 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>

62
Manmohan

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

6
Dragan B.

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

Où pouvez-vous faire:

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

OR

button{
  margin: 13px;
}
3
Gammer

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>
2
mark dibe

J'ai utilisé le plug-in Bootstrap 4 buttons ( https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin ) Et ajouté la classe arrondi aux libellés et au classe mx-1 jusqu'au bouton du milieu pour obtenir l’aspect souhaité des boutons radio séparés. En utilisant la classe btn-toolbar, les cercles de boutons radio sont apparus pour moi, ce qui n’est pas ce que je voulais. J'espère que ça 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>
2
Jonathan

Pour cela, vous pouvez également ajouter un espace .btn de classe à 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éfinir cette classe comme suit

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

Ce que Dragan B a suggéré est la bonne voie à suivre pour Bootstrap 4. J'ai présenté un exemple ci-dessous. par exemple. mr-3 est margin-right: 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>

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

1
mrana

J'ai effectivement rencontré la même exigence. J'ai simplement utilisé CSS override comme ça

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

J'ai fini par faire quelque chose de similaire à ce que mark dibe a fait, mais je devais déterminer l'espacement d'une manière légèrement différente.

Les classes col-x dans bootstrap peuvent être une bouée de sauvetage absolue. J'ai fini par faire quelque chose de semblable à 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 permet 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)

0
Conrad37

si vous utilisez Bootstrap, vous pouvez modifier le style de la manière suivante: si vous ne voulez que sur une page, puis entre les balises head ajoutez .btn-group btn {margin-right: 1rem;}

Si est pour tout le site web ajouter au fichier css

0
Vicente Niclos