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

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.

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

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.

Prueba así: Manifestación

CSS:

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

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

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.