¿Mantener un poco de espacio vertical entre los elementos cuando se envuelven?

4 minutos de lectura

Avatar de usuario de RocketNuts
cohetenueces

Usando Bootstrapcuando estoy poniendo un montón de elementos (por ejemplo, buttons) en una fila y reduce la ventana, los elementos se envuelven.

Pero si bien hay algo de espacio horizontal entre los elementos cuando la ventana es lo suficientemente ancha como para contener todo uno al lado del otro, verticalmente todo se pega, con cero píxeles de espacio vacío entre ellos.

ejemplo en vivo (reduzca o amplíe la ventana de salida para ver el efecto)

Ejemplo de captura de pantalla:
1. Suficientemente ancho, observe el espacio entre los botones

2. Envolviéndolo, observe que NO hay espacio entre los botones apilados uno encima del otro

Supongo que podría jugar con algún CSS personalizado, agregar márgenes verticales o lo que sea, pero para mantener las cosas lo más compatibles y estándar posible, me pregunto si hay una forma mejor o más nativa de solucionar esto en un diseño de Bootstrap.

  • duplicado: stackoverflow.com/questions/17809671/… stackoverflow.com/questions/21981117/… stackoverflow.com/questions/18918921/…

    – vasija

    29 de abril de 2015 a las 7:59


Avatar de usuario de Shanaka
Shanaka

Lo que sucede aquí es que los botones se muestran como un bloque en línea y, de forma predeterminada, dichos elementos no tienen espacios en blanco ni márgenes para empezar. Puede usar el siguiente método para evitar esto.

Lo que he hecho es agregar una clase al elemento principal de los botones y heredar el estilo a la clase “btn”.

html

<div class="container">
    <div class="row">
        <div class="col-xs-12 button-wrapper">
            <button class="btn btn-primary">Lorem ipsum dolor sit amet</button>
            <button class="btn btn-info">consectetur adipiscing elit</button>
            <button class="btn btn-success">sed do eiusmod tempor incididunt</button>
        </div>
    </div>
</div>

CSS

.button-wrapper .btn {
    margin-bottom:5px;
}

Manifestación

  • Esto tiene el margen incluso en pantallas que son lo suficientemente anchas como para mostrar los botones en una línea. Esta respuesta es cómo evitar eso: stackoverflow.com/questions/30887071/…

    – Tahsis Claus

    23/03/2017 a las 21:40


Con Bootstrap, siempre me gusta crear clases para agregar márgenes superior e inferior de la siguiente manera:

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

.bottom5 { margin-bottom:5px; }
.bottom7 { margin-bottom:7px; }
.bottom10 { margin-bottom:10px; }
.bottom15 { margin-bottom:15px; }
.bottom17 { margin-bottom:17px; }
.bottom30 { margin-bottom:30px; }

Es fácil de recordar y es una solución rápida para este problema. Simplemente agregue a su archivo main.css.

  • No funcionó para mí. Quizás estas clases no funcionen en combinación con ciertas clases de arranque debido a la configuración flotante o de visualización. Pero encontré una alternativa similar, mira mi solución

    – roland

    30 de agosto de 2017 a las 13:55

Prueba así: Manifestación

CSS:

 @media (max-width: 779px) {
     .btn{
         margin-bottom:10px;
 }

  • Funciona para mí y no hay personalización de html.

    – Abela

    31 de diciembre de 2016 a las 6:05

  • Sí, esto me parece un poco molesto, pero creo que es la mejor solución que he visto hasta ahora. Tendría sentido si bootstrap tuviera algunas clases que solo se activan en función de diferentes tamaños para márgenes y cosas (como mt-sm-10, mb-md-20, etc). Me pregunto si vale la pena agregarlos.

    – usuario1274820

    8 de noviembre de 2018 a las 16:40


Comprobar el ejemplo abajo:

Código:

.btn {
    margin: 10px auto;
}
<div class="container">
	<div class="row">
        
        <div class="col-xs-12 col-sm-4">
            <button class="btn btn-block btn-primary">Lorem ipsum dolor sit amet</button>
        </div>
        
        <div class="col-xs-12 col-sm-4">
            <button class="btn btn-block btn-info">consectetur adipiscing elit</button>
        </div>
        
        <div class="col-xs-12 col-sm-4">
            <button class="btn btn-block btn-success">sed do eiusmod tempor incididunt</button>
        </div>        
        
	</div>
</div>

Ejemplo

Estoy usando este método: agregue un div con algo de espacio vertical:

<div class="vspace1em"></div>

CSS:

    div.vspace1em {
        clear: both;
        height: 1em;
    }

  • Esta solución es mucho más limpia que agregar márgenes a los elementos de arranque.

    – jahackbeth

    31 de agosto de 2017 a las 4:20

Avatar de usuario de ItzMe_Ezhil
ItzMe_Ezhil

Manifestación
Use CSS de margen inferior para el botón.

    .btn{margin-bottom:10px;}

Puede escribir este css con el nuevo nombre de la clase principal, para evitar el efecto del css anterior en otras páginas.

  • Esta solución es mucho más limpia que agregar márgenes a los elementos de arranque.

    – jahackbeth

    31 de agosto de 2017 a las 4:20

¿Ha sido útil esta solución?