twitter bootstrap - español - Espacio vertical al apilar columnas en Bootstrap 3

bootstrap tutorial

Question

Cuando las columnas están apiladas en modo móvil, me gustaría que haya un espacio vertical que separe el contenido de la columna, ¿cómo puedo hacer esto?

Consulte jsfiddle en http://jsfiddle.net/tofutim/3sWEN/ y varíe el ancho de la salida. Debe haber algo de espacio antes del segundo lorem ipsum.

<div class="container">
    <div class="well well-lg" style="margin:10px">
    <div class="row">
        <div class="col-sm-6">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <form>               
                <input type="textbox" class="form-control" placeholder="Username"></input>
                <input type="password" class="form-control" placeholder="Password"></input>                     
            </form>
        </div>
        <div class="col-sm-6">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <form role="form">
                <div class="form-group">  
                    <button class="form-control btn btn-default">Push me</button>
                <input type="textbox" class="form-control" placeholder="Username"></input>
                <input type="password" class="form-control" placeholder="Password"></input>            
                </div>
            </form>
        </div>
    </div>
    </div>
</div>

Answer 1

Agregue un margen superior negativo a cada fila, y contrarreste ese margen en cada columna, así:

.row {
  margin-top: -10px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, 
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, 
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, 
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, 
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, 
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, 
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, 
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, 
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, 
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, 
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, 
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  margin-top: 10px;
}

Después de que las columnas comienzan a apilarse, obtienen el margen vertical entre ellas.

Funciona en todos los tamaños de pantalla.

Answer 2

Intenta usar span en lugar de div con las clases de bootstrap.

Answer 3

Mire este ejemplo http://getbootstrap.com/examples/carousel/ Cuando está apilado Hay un margen entre el texto y la imagen 500 * 500. Esto se debe a que el texto tiene <p> a su alrededor y su margen inferior de 20 píxeles

Answer 4

Quería que funcionara para cuando mis columnas se acumulan a menos de 991px y afectan a todo menos al primer hijo, así que puse

@media (max-width: 991px) { 
  [class*="col-"]:not(:first-child){
      margin-top: 40px;
  }
}

Answer 5

Un simple Bootstrap4, sin una solución adicional de CSS, hacks o mixin sería algo así como:

<div class="row">
    <div class="col-md-3 mb-3 mb-md-0">
    ....
    </div>
    <div class="col-md-9 mb-3 mb-md-0">
    ....
    </div>
</div>

Esto agrega un margen inferior (mb-3) pero lo pone a cero cuando no está apilado (mb-md-0).

Como las consultas de medios para utilidades de espaciamiento como "mb-3" se aplican a "todo sobre" (ancho mínimo), necesita hacer el oppsite y restablecerlo a 0 (mb-XX-0) cuando no está apilado. En este caso, lo configuramos para que se acumule debajo de "md" (sm), por lo que establecemos el margen 0 en ese punto de interrupción.

Aquí hay una horquilla de su jsfiddle para incluir el margen solo en el móvil. Los estilos "mb-3 mb-md-0" en columnas muestran la solución propuesta. (Versión de Jsfiddle aquí: http://jsfiddle.net/cb9oc064/10/ )

@import url(''https://getbootstrap.com/dist/css/bootstrap.css'');

<div class="container">
    <div class="well well-lg" style="margin:10px">
    <div class="row">
        <div class="col-sm-6 mb-3 mb-md-0">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <form>   
            <div class="form-group"> 
                <input type="textbox" class="form-control " placeholder="Username"></input>
                </div>    
                <div class="form-group"> 
                <input type="password" class="form-control " placeholder="Password"></input>   
                </div>
            </form>
        </div>
        <div class="col-sm-6 mb-3 mb-md-0">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <form role="form">
                <div class="form-group">  
                    <button class="form-control btn btn-default">Push me</button>
                <input type="textbox" class="form-control" placeholder="Username"></input>
                </div>
                <div class="form-group mb-3 ">
                <input type="password" class="form-control" placeholder="Password"></input>            
                </div>
            </form>
        </div>
    </div>
    </div>
</div>

Answer 6

Una forma sería con CSS que agrega margen inferior a col-* en dispositivos / anchos más pequeños.

@media (max-width: 768px) {

  [class*="col-"] {
      margin-bottom: 15px;
  }

}

Otra forma es agregar un div que solo sea visible en dispositivos / anchos más pequeños.

 <div class="col-sm-6">
    <div class="hidden-lg hidden-md hidden-sm">&nbsp;</div>
        ...

Demostración: http://bootply.com/92276

Actualización 2018

Bootstrap 4 ahora tiene utilidades de espacio que se pueden usar.

Answer 7

Utilice .form-group en las columnas

Esa es la manera de arranque. Otros hacks de CSS mencionados pueden funcionar, pero no son la forma prevista de lograr lo que desea. Hackear bootstraps CSS puede llevar a más trabajo más tarde al cambiar la versión de arranque.

Ejemplo de Bootply: http://www.bootply.com/4cXfQkTCAm#