html - (bootstrap) ¿Manteniendo un poco de espacio vertical entre los elementos cuando se envuelven?

css twitter-bootstrap

Question

Usando Bootstrap, cuando coloco un conjunto de elementos (por ejemplo, botones) en una fila y encoge la ventana, los elementos se envuelven.

Pero mientras hay un espacio horizontal entre los elementos cuando la ventana es lo suficientemente ancha como para contener todo uno al lado del otro, verticalmente, todo se atasca, 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. Lo suficientemente ancho, observe el espacio entre los botones.
2. Envolviéndose, note que NO hay espacio entre los botones apilados uno encima del otro

Supongo que podría alterar un poco de 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 manera mejor o más nativa de solucionar esto en un diseño de Bootstrap.

Answer 1

Con Bootstrap, siempre me gusta hacer clases para agregar márgenes superior e inferior, como así:

.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. Solo agrégalo a tu archivo main.css.

Answer 2

Estoy usando este método: agregue un div con algún espacio vertical:

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

css:

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

Answer 3

Lo que sucede aquí es que los botones se muestran como un bloque en línea y, de manera predeterminada, tales elementos no tienen espacios en blanco ni márgenes para empezar. Puedes usar el método de abajo 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;
}

Demo

Answer 4

Prueba así: Demo

CSS:

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

Answer 5

Revisa el siguiente ejemplo :

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>

Example

Answer 6

Demo Use el margen inferior de css para el botón.

    .btn{margin-bottom:10px;}

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