¿Cómo agrego espacio entre columnas en Bootstrap?


202

Estoy seguro de que hay una solución simple para este problema. Básicamente, si tengo dos columnas, ¿cómo puedo agregar un espacio entre ellas?

por ejemplo, si el html es:

<div class="col-md-6"></div>
<div class="col-md-6"></div>

El resultado sería simplemente dos columnas, una al lado de la otra, ocupando todo el ancho de la página. Digamos que el ancho se estableció en 1000pxentonces cada div sería 500pxancho.

Si quisiera un 100pxespacio entre los dos, ¿cómo podría lograr esto? Obviamente, automáticamente a través de bootstrap, los tamaños div se convertirían en 450pxcada uno para compensar el espacio

Respuestas:


149

Puede lograr el espacio entre columnas utilizando las col-md-offset-*clases, documentadas aquí . El espaciado es consistente para que todas sus columnas se alineen correctamente. Para obtener un espaciado uniforme y el tamaño de la columna, haría lo siguiente:

<div class="row">
  <div class="col-md-5"></div>
  <div class="col-md-5 col-md-offset-2"></div>
</div>

En Bootstrap 4 use: offset-2ooffset-md-2


29
eso funcionaría cuando quiero seguir con los tamaños de columna predeterminados, ¿qué pasa si quiero un tamaño específico de espacio, en lugar de compensar las columnas?
Muhammed Bhikha

3
En este caso, recomendaría usar los mixins proporcionados para ajustar los canales de la columna: getbootstrap.com/css/#grid-less : Bootstrap no hace lo que usted pide en la pregunta, no puede "ajustar" los anchos de cuadrícula para tener en cuenta espacio adicional en el medio porque se basa en una cuadrícula de píxeles.
Ben

2
George, tienes las clases de compensación para esto. Pero si considera que las canaletas integradas son insuficientes, puede intentar compilar su propia versión de bootstrap, ya sea desde menos o sass, según sus preferencias. Luego puede modificar los anchos de columna y las canaletas para que coincidan con su sitio web. Sin embargo, agregar divs vacíos no es realmente malo, lo importante es crear algo que usted (y / o su equipo) puedan usar de manera consistente; si los divs vacíos son la forma de lograrlo, entonces está bien; recuerde que su marcado debe ser leído por sus desarrolladores, no por sus usuarios finales.
Ben

24
Esta publicación no es una respuesta en absoluto, crea una brecha mucho mayor de lo solicitado.
Sebastien

2
En Bootstrap 4, esto es offset-md-2 o offset-2
Mahesh

318

Estaba enfrentando el mismo problema; y lo siguiente funcionó bien para mí. Espero que esto ayude a alguien a aterrizar aquí:

<div class="row">
  <div class="col-md-6">
     <div class="col-md-12">
        Some Content.. 
     </div>
  </div>
  <div class="col-md-6">
     <div class="col-md-12">
        Some Second Content.. 
     </div>
  </div>
</div>

Esto generará automáticamente algo de espacio entre los 2 divs.

ingrese la descripción de la imagen aquí


principalmente debido a los anchos de canaleta.
Utpal - Ur Best Pal

14
"anchos de canal" se refiere al espaciado en el relleno y los márgenes definidos en el núcleo del sistema de cuadrícula de bootstrap. En resumen, agregar un segundo div con col-xs-12es lo mismo que agregar un div conwidth:100%; padding:0px 15x;
mix3d

@ sixty4bit podría compartir su código; puede ser que te pueda ayudar.
Utpal - Ur Best Pal

eso sería genial @ Utpal-UrBestPal, ¡gracias! He
sixty4bit el

2
Si está utilizando esta solución y no funciona, lea por qué funciona en la explicación de @ mix3d y comprenderá lo que está haciendo mal.
MauF

73

Sé que llego tarde a la fiesta, pero podrías intentar espaciar las cajas con relleno.

<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>

CSS:

.box {
    padding: 0 5px 0 5px;
}
.box .inner {
    background-color: #fff;
}

Pruébalo


En realidad, no porque no se puede utilizar row-eq-heightcon él
Greg Woz

13

puede usar clip de fondo y modelo de caja con propiedad de borde

.box{
  box-model: border-box;
  border: 3px solid transparent;
  background-clip:padding-box;
}
<div class="row">
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
</div>

13

He tenido problemas similares con el espacio entre columnas. El problema raíz es que las columnas en bootstrap 3 y 4 usan relleno en lugar de margen. Entonces los colores de fondo para dos columnas adyacentes se tocan entre sí.

Encontré una solución que se ajusta a nuestro problema y que probablemente funcionará para la mayoría de las personas que intentan espaciar columnas y mantener el mismo ancho de canal que el resto del sistema de cuadrícula.

Este fue el resultado final al que íbamos

ingrese la descripción de la imagen aquí

Tener la brecha con una sombra paralela entre columnas fue problemático. No queríamos espacio extra entre columnas. Solo queríamos que las canaletas fueran "transparentes" para que el color de fondo del sitio apareciera entre dos columnas blancas.

este es el marcado para las dos columnas

<div class="row">
    <div class="col-sm-7">
        <div class="raised-block">
            <h3>Facebook</h3>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="raised-block">
            <h3>Tweets</h3>
        </div>
    </div>
</div>

CSS

.raised-block {
    background-color: #fff;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: -0.625rem; // for us 0.625rem == 10px
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
    .raised-block {
        margin-left: -0.625rem;
    }
}
.row [class^="col-"]:first-child>.raised-block {
    // this is so the first column has no margin so it will not be "indented"
    margin-left: -0.625rem;
}

Este enfoque requiere un div interno con márgenes negativos al igual que la rutina de arranque de clase "fila". Y este div, lo llamamos "bloque elevado", debe ser el hermano directo de una columna

De esta manera, aún obtienes el relleno adecuado dentro de tus columnas. He visto soluciones que parecen funcionar mediante la creación de espacio, pero desafortunadamente las columnas que crean tienen un relleno adicional a cada lado de la fila, por lo que termina haciendo que la fila sea más delgada para lo que se diseñó la cuadrícula. Si observa la imagen para obtener el aspecto deseado, esto significaría que las dos columnas juntas serían más pequeñas que la más grande en la parte superior, lo que rompe la estructura natural de la cuadrícula.

El principal inconveniente de este enfoque es que requiere un marcado adicional que envuelve el contenido de cada columna. Para nosotros esto funciona porque solo columnas específicas necesitan espacio entre ellas para lograr el aspecto deseado.


11

Esto permitirá un espacio entre las dos columnas y, obviamente, si desea cambiar el ancho predeterminado, puede elegir mixins para modificar el ancho de arranque predeterminado. O puede dar el ancho usando el estilo CSS en línea.

<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>

44
La semántica de esto no es exactamente lo que @Muhammed está preguntando. Está agregando un cambio en el orden de las columnas con pull-left, pull-right.
Luchux

9

Puede lograr el espacio entre columnas utilizando las clases col-xs- *, dentro de un div col-xs- * codificado a continuación. El espaciado es consistente para que todas sus columnas se alineen correctamente. Para obtener un espaciado uniforme y el tamaño de la columna, haría lo siguiente:

<div class="container">
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
</div>

6

Usa la .form-groupclase de bootstrap . Así en tu caso:

<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>

1
¿Cómo puede ser útil un margen inferior aquí?
Elisabeth

12
Me conecté a propósito solo para no gustarme este truco.
szdrnja el

13
Me conecté a propósito solo para votar tu comentario sobre iniciar sesión a propósito solo para no gustarme este truco.
Adam Spires

Me conecté a propósito solo para votar tu comentario sobre iniciar sesión a propósito solo para votar el comentario sobre iniciar sesión a propósito para que no me guste este truco.
Negro

5

De acuerdo con la documentación de Bootstrap 4 , debe darle al padre un margen negativo mx-n*y a los niños un relleno positivopx-*

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row mx-n5">
  <div class="col px-5">
    <div class="p-3 border bg-light">Custom column padding</div>
  </div>
  <div class="col px-5">
    <div class="p-3 border bg-light">Custom column padding</div>
  </div>
</div>


Lo que funcionó mejor para mí (espacio vertical entre filas) fue <div class="row mt-n4">y <div class="col-3 pt-4">.
Gavin

4

Dentro de col-md- ?, cree otro div y coloque la imagen en ese div, de modo que pueda agregar fácilmente el relleno de esta manera.

<div class="row">
  <div class="col-md-8">
     <div class="thumbnail">
       <img src="#"/>
     </div>
  </div>
  <div class="col-md-4">
     <div class="thumbnail">
       <img src="#"/>
     </div>
  </div>   
</div>

<style>
  thumbnail{
     padding:4px;
           }
</style>

4

Bootstrap 4 , archivo custom.scss puede agregar el siguiente código:

$grid-gutter-width-base: 20px;

$grid-gutter-widths: ( xs: $grid-gutter-width-base, 
sm: $grid-gutter-width-base, 
md: $grid-gutter-width-base, 
lg: $grid-gutter-width-base, 
xl: $grid-gutter-width-base
);

por defecto $ grid-gutter-width-base: 30px;


1
¿podría por favor elaborarlo? no funciona para mí
Selva Ganapathi

2
@SelvaGanapathi debe volver a compilar después de cambiar estas variables: getbootstrap.com/docs/4.0/layout/grid/#customizing-the-grid
gbjbaanb

En Bootstrap 4, esto es offset-md-2 o offset-2
Mahesh

2

Tuve que descubrir cómo hacer esto para 3 columnas. Quería redondear las esquinas de los divs y no pude conseguir que el espacio funcionara. Usé márgenes. En mi caso, calculé que el 90% de la pantalla se debe completar con los divs y el 10% para los márgenes:

html:

<div class="row">
  <div id="orange" class="col-md-4">
    <h1>Orange Div</h1>
  </div>
  <div id="green" class="col-md-4">
    <h1>Green Div</h1>
  </div>
  <div id="aqua" class="col-md-4">
    <h1>Aqua Div</h1>
  </div>
</div>

y CSS:

#orange {
    background-color:orange;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 2.5% 0 2.5%;
    width:30%;
}
#green {
    background-color:green;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 0 0 0;
    width:30%;
}
#aqua {
    background-color:#39F;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 2.5% 0 2.5%;
    width: 30%;
}

Para cambiar el tamaño correctamente para dispositivos móviles, hice que el CSS cambiara el ancho de 30% a width:92.5%;menos@media (max-width:1023px)


2

Dado que estás usando bootstrap , supongo que quieres hacer que la cosa responda . En ese caso no deberías usar tamaños fijos, en 'px' por ejemplo.

Como solución alternativa a otras soluciones, propongo hacer ambas columnas "col-md-5" en lugar de "col-md-6", y luego en el elemento padre "fila" que contiene las columnas, agregue la clase "justify-content" -entre ", que coloca el espacio libre en el medio, como puede consultar en el documento de arranque aquí

Esta solución también es válida para más de dos columnas ajustando el "col-md-x" por supuesto

Espero eso ayude ;)


1

es simple ... tienes que agregar un borde sólido a la derecha, izquierda a col- * y debería funcionar ... :)

se ve así: http://i.stack.imgur.com/CF5ZV.png

HTML:

<div class="row">
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
</div>

CSS:

div#services_block {
   height: 355px;
   background-color: #33363a;
   border-left:3px solid white;
   border-right:3px solid white;
}

8
no usas múltiples identificadores en la misma página, es totalmente falta de conocimiento sobre cómo usar CSS. Use clases en su lugar.
LowFieldTheory

1

Sé que esta publicación está un poco anticuada, pero me encontré con este mismo problema. Ejemplo de mi html.

<div class="row">
    <div class="col-xs-3">
        <div class="form-group">
            <label asp-for="FirstName" class="control-label"></label>
            <input asp-for="FirstName" class="form-control" />
            <span asp-validation-for="FirstName" class="text-danger"></span>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="form-group">
            <label asp-for="LastName" class="control-label"></label>
            <input asp-for="LastName" class="form-control" />
            <span asp-validation-for="LastName" class="text-danger"></span>
        </div>
    </div>            
</div>

Para crear espacio entre los grupos, anulé el margen de bootstrap de -15px en mi archivo site.css al reducir el margen negativo en 5.

Esto es lo que hice ...

.form-group {
    margin-right: -10px;
}

Espero que esto ayude a alguien más.


1

Necesitaba una columna en el móvil y dos columnas desde el retrato de la tableta hacia arriba, con el mismo espacio entre ellas en el medio (también sin relleno de cuadrícula dentro de las columnas). Podría lograrse utilizando utilidades de espaciado y omitiendo el número en col-md:

    <div class="container-fluid px-0">
        <div class="row no-gutters">
            <div class="col-sm-12 col-md mr-md-3" style="background-color: orange">
                <p><strong>Column 1</strong></p>
            </div>
            <div class="col-sm-12 col-md ml-md-3" style="background-color: orange">
                <p><strong>Column 1</strong></p>
            </div>
        </div>
    </div>

0

¿Qué tal simplemente agregar un borde del mismo color que el fondo usando CSS? Soy nuevo en esto, así que tal vez haya una buena razón para no hacerlo, pero se veía bien cuando lo probé.


55
Bienvenido a stack overflow. Si necesita más información o aclaraciones sobre una pregunta, utilice los comentarios en lugar de las respuestas.
β.εηοιτ.βε

Si el fondo utilizara una imagen / textura en lugar de un color sólido, esto sería obvio.
Charles Watson

0

Para obtener un ancho particular de espacio entre columnas, tenemos que configurarlo paddingen el diseño estándar de Bootstrap.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

/* Check breakpoint at http://getbootstrap.com/css/#grid-media-queries */
@media (min-width: 992px) { 
  .space-100-px > .row > .col-md-6:first-child {
    padding: 0 50px 0 0; /* The first half of 100px */
  }
  .space-100-px > .row > .col-md-6:last-child {
    padding: 0 0 0 50px; /* The second half of 100px */
  }
}

/* The result will be easier to see. */ 
.space-100-px img {
  width: 100%;
  height: auto;
}
<div class="container-fluid space-100-px">
  <div class="row">
    <div class="col-md-6">
      <img src="http://placehold.it/450x100?text=Left" alt="Left">
    </div>
    <div class="col-md-6">
      <img src="http://placehold.it/450x100?text=Right" alt="Right">
    </div>
  </div>
</div>


0

Esto será útil.

.list-item{
  margin-right:-10px;
   margin-top:10px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    padding: 0px;
  }
<div class="col-md-4">
  <div class="list-item">
      <h2>Your name</h2> 
  </div>
</div>
<div class="col-md-4">
   <div class="list-item"></div>
</div>

Si el uso desea aumentar o disminuir un margen adicional en el lado derecho del cuadro, simplemente edite la propiedad margen-derecho del elemento de lista.

salida de muestra

ingrese la descripción de la imagen aquí


0

Solo borde blanco alrededor del elemento de envoltura

.padding-pls{
  border-left: 13px solid white;
  border-right: 13px solid white;
}
.row .col-md-6:first-child>.padding-pls {
  border-left: 0px solid white;
}
.row .col-md-6:last-child>.padding-pls {
  border-right: 0px solid white;
}

y primer + último hijo sin borde

    <div class="row">
      <div class="col-md-6">
        <div class="col-md-12 padding-pls">
          Keci
        </div>
      </div>
      <div class="col-md-6">
        <div class="col-md-12 padding-pls">
          Keci
        </div>
      </div>
  </div>

0
    <div class="col-md-12 no_padding header_row"></div>



    <div class="second_row">
        <div class="col-md-4 box_shadow"></div>
        <div class="col-md-8 no_padding_right">
            <div class="col-md-12 box_shadow"></div>
        </div>
    </div>


    body{
    background:#F0F0F0;
}

.main_holder{
    min-height: 600px;
    margin-top: 40px;
    height: 600px;
}
.box_shadow{
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    background: white;
    height: auto;
    min-height: 500px;
}

.no_padding{
    padding: 0px !important;
}

.no_padding_right{
    padding-right: 0px !important;
}

.header_row{
    height: 60px;
    background: #00796B;
    -webkit-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
    -moz-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
    box-shadow: 0px 0px 9px 1px rgba(143,140,143,1); 
}

.second_row{
    position: relative;
    width: 100% !important;
    top: 20px;
}

2
Un poco de prosa sobre qué y por qué podría ser útil.
Uwe Allner

0
<div class="col-md-6">
    <div class="inner">
        <!-- Put the col-6 elements in the inner div -->
    </div>
</div>

Por defecto, esto proporciona algo de relleno dentro del div externo de la manera que parece necesitar. Además, también puede modificar el relleno utilizando CSS personalizado.



0

Bootstrap 4

La documentación dice ( aquí ):

Las filas son envoltorios para columnas. Cada columna tiene un relleno horizontal (llamado canalón) para controlar el espacio entre ellas. Este relleno se contrarresta en las filas con márgenes negativos. De esta manera, todo el contenido de sus columnas se alinea visualmente hacia abajo en el lado izquierdo.

Entonces, la respuesta correcta es: establecer cols 'padding-left / right igual a menos el rowmargen de su izquierda-derecha / izquierda. Así de simple

#my-row {
  margin-left: -80px;
  margin-right: -80px;
}

#my-col {
  padding-left: 80px;
  padding-right: 80px;
}

Demostración: https://codepen.io/frouo/pen/OqGaWN

col con espaciado personalizado


0

ingrese la descripción de la imagen aquí

Bootstrap 4: columnas separadas utilizando filas anidadas.

<div class="container">
    <div class="row bg-info p-3">

        <!-- left column -->
        <div class="col-8 ">
            <div class="col-12 bg-light p-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
            </div>
        </div>

        <!-- right column -->
        <div class="col-4 ">
            <div class="col-12 bg-light p-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
            </div>
        </div>
    </div>
</div>

¿Quizás usar la respuesta proporcionada por @estani es una forma más "clásica" de hacer esto con bootstrap4?
sodimel

0

Crea una clase y usa:

margen: 1.5em .5em; ancho máximo: calc (50% - 1em)! importante;

Donde 1em en el ancho máximo es igual al margen izquierdo / derecho sumado.


-1

Esta también es una forma de hacerlo y sus trabajos. Por favor, consulte la siguiente url https://jsfiddle.net/sarfarazk/ofgqm0sh/

<div class="container">
 <div class="row">
  <div class="col-md-6">
    <div class="bg-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="col-md-6">
    <div class="bg-warning">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
    </div>
  </div>
</div>
</div>

-2

Usar el margen izquierdo es el camino a seguir:

<div style="margin-left:-2px" class="col-md-6"></div>
<div style="margin-left:2px" class="col-md-6"></div>

funciona perfectamente


No, eso no rompe la capacidad de respuesta.
Crasher

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.