¿Cómo puedo hacer espacio entre dos botones en el mismo div?

108

¿Cuál es la mejor manera de espaciar horizontalmente los botones de Bootstrap?¿Cómo puedo hacer espacio entre dos botones en el mismo div?

En el momento de tocar los botones son:

<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 que muestra el problema: http://jsfiddle.net/hhimanshu/sYLRq/4/

Fuente

2012-06-26 daydreamer

que tenía el mismo problema y terminó añadiendo un margen de uno de los botones- mr-1 . – Ananth

231

los ponen en el interior btn-toolbar o algún otro recipiente, no btn-group. btn-group los une. Más información sobre Bootstrap documentation.

Editar: La pregunta original era para Bootstrap 2.x, pero lo mismo sigue siendo válido para Bootstrap 3 y Bootstrap 4.

Fuente

2012-06-26 22:10:34

Estaba buscando una solución a este problema hace años, por qué no te encontré anteriormente, eres mi héroe –

¡qué respuesta más directa! mi héroe del día :) – Naga

'btn-toolbar' puede ajustar algunos botones a una nueva línea. ¿Cómo evitar esto? – lukas84

I real se encontró con el mismo requisito. Simplemente usé la anulación de CSS como esta

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

Fuente

2014-01-29 02:57:19

Necesita márgenes – ymakux

La manera más fácil en la mayoría de las situaciones es el margen.

donde se puede hacer:

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

button{ 
    margin: 13px; 
}

Fuente

2015-10-05 19:03:47 Gammer

sólo hay que poner los botones en una clase (class = "Bot-barra de herramientas") según lo dicho por bro Miroslav Popovic.It funciona increíble .

<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>

Fuente

2015-10-24 07:12:12 Manmohan

Puede utilizar spacing for Bootstrap y sin necesidad de ningún CSS adicional. Solo agrega las clases a tus botones. Esta es la versión 4.

Fuente

2017-09-28 13:21:22

si el uso de rutina de carga, que puede cambiar con estilo como: Si desea sólo en una página, a continuación, añadir etiquetas de la cabeza Transcurrirá BTN-.btn grupo {margin-right: 1rem;}

Si es para todo el sitio web añadir a archivo css

Fuente

2018-02-11 15:56:20

se debe utilizar v.4 arranque

<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>

Fuente

2018-02-11 16:04:26

¿Cómo puedo hacer espacio entre dos botones en el mismo div?

Respuesta

Cuestiones relacionadas