web-dev-qa-db-fra.com

Comment donner de l'espacement entre les boutons à l'aide de bootstrap

Je souhaite donner l’espacement entre les boutons s’il existe un moyen de le faire à l’aide de bootstrap afin qu’ils soient cohérents pour différentes résolutions d’écran.

J'ai essayé d'utiliser margin-left, mais est-ce la bonne façon de procéder?

Voici la démo

HTML:

<div class="btn-toolbar text-center well">
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
      <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> EDIT CUSTOMER
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
      <span class="glyphicon glyphicon-time" aria-hidden="true"></span> HISTORY
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> DELETE CUSTOMER
    </button>
</div>

CSS:

.margin-left{
    margin-left: 80px !important;
}
htmlcsstwitter-bootstrap
45
vaibhav jain

HTML:

<input id="id_ok" class="btn btn-space" value="OK" type="button">
<input id="id_cancel" class="btn btn-space" value="Cancel" type="button">

CSS:

.btn-space {
    margin-right: 5px;
}
51
Sergey Chepurnov

Vous pouvez obtenir en utilisant bootstrap Spacing. Bootstrap Spacing comprend une large gamme de marges et de rembourrages réactifs. Dans l'exemple ci-dessous, mr-1, définissez margin ou padding sur $spacer * .25.

Exemple:

<button class="btn btn-outline-primary mr-1" href="#">Sign up</button>
<button class="btn btn-outline-primary" href="#">Login</button>

Vous pouvez en lire plus Bootstrap Sapcing .

13
Asif Raza
  1. Enveloppez vos boutons dans un div avec class='col-xs-3' (par exemple).
  2. Ajoutez class="btn-block" à vos boutons. 

Cela fournira un espacement permanent.

12
Alex Khlebaev

Si vous souhaitez utiliser margin, supprimez la classe de chaque bouton et utilisez le sélecteur: last-child CSS.

Html: 

<div class="btn-toolbar text-center well">
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
      <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> EDIT CUSTOMER
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
      <span class="glyphicon glyphicon-time" aria-hidden="true"></span> HISTORY
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> DELETE CUSTOMER
    </button>
</div>

Css: 

.btn-toolbar .btn{
    margin-right: 5px;
}
.btn-toolbar .btn:last-child{
    margin-right: 0;
}
9
Thibaud Granier

Utilisez la classe btn-primary-spacing pour tous les boutons, supprimez la classe margin-left

Exemple : 

<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing">
  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET
</button>

CSS sera comme:

.btn-primary-spacing 
{
margin-right: 5px;
margin-bottom: 5px !important;
}
3
Shashikala

Dépend de combien d'espace vous voulez. Je ne suis pas sûr d’être d’accord avec la logique d’ajouter un "col-XX-1" entre chacun, car vous définissez ensuite une "colonne" entière entre chacun.

Si vous voulez juste "un peu d'espacement" entre chaque bouton, j'aime bien ajouter du rembourrage à la ligne englobante. De cette façon, je peux toujours utiliser les 12 colonnes tout en incluant un "espace" entre chaque bouton.

Bootply: http://www.bootply.com/ugeXrxpPvD

3
ganders

Vous pouvez utiliser spacing intégré à partir de Bootstrap , vous n'avez donc pas besoin de CSS supplémentaire. Ceci est pour Bootstrap 4. 

2
Dragan B.

Ajouter des marges à un bouton le rend plus large, de sorte que les boutons entrent dans le système de grille. Si seul un effet visuel est important, attribuez au bouton une bordure blanche avec [style = "margin: 0px; border: blanc fixe;"]. La largeur du bouton reste inchangée.

1
Theo Knoops

en utilisant bootstrap, vous pouvez ajouter <div class="col-sm-1 col-xs-1 col-md-1 col-lg-1"></div> entre les boutons.

0
Joaquin Oscar Ibar

Le code original est généralement présent, mais vous avez besoin de btn-groups autour de chaque bouton. Dans Bootstrap 3, vous pouvez utiliser une barre d'outils btn et un groupe btn pour effectuer le travail. Je n'ai pas fait BS4 mais il a des constructions similaires.

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group" role="group">
    <button class="btn btn-default">Button 1</button>
  </div>
  <div class="btn-group" role="group">
    <button class="btn btn-default">Button 2</button>
  </div>
</div>
0
Mike K