html - sistema - separacion entre columnas bootstrap 4

sistema de red de bootstrap de twitter. Espaciado entre columnas

Question

Estoy seguro de que hay una solución simple a 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>

La salida 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 1000px luego cada div tendría 500px ancho.

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

Answer 1

¿Qué tal si agregas 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é.

Answer 2

Dentro del col-md- ?, crea otro div y coloca la imagen en ese div, entonces puedes agregar fácilmente el relleno como tal.

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

Answer 3

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 automáticamente dejará espacio entre los 2 divs.

Answer 4

Esto permitirá un espacio entre las dos columnas y, obviamente, si desea cambiar el ancho predeterminado, puede usar mixins para modificar el ancho de arranque predeterminado. O bien, puede dar el ancho usando el estilo css en línea. ¡¡¡La decisión es completamente tuya!!!

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

¡¡¡Aclamaciones!!!

Answer 5

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 el margen adicional en el lado derecho de la caja, simplemente edite la propiedad de margen derecho de la lista de elementos.

muestra de salida

Answer 6

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

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

Este fue el resultado final al que íbamos

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

esta es la marca de 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 el bootstrap de la clase "row". Y este div, lo llamamos "bloque elevado", debe ser el hermano directo de una columna

De esta forma, aún obtendrá el relleno adecuado dentro de sus columnas. He visto soluciones que parecen funcionar al crear espacio, pero desafortunadamente las columnas que crean tienen un relleno adicional en cada lado de la fila, por lo que hace que la fila sea más delgada para la que se diseñó el diseño de la cuadrícula. Si mira la imagen para 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 mayor inconveniente de este enfoque es que requiere un marcado extra que envuelve el contenido de cada columna. Para nosotros, esto funciona porque solo las columnas específicas necesitaban espacio entre ellas para lograr el aspecto deseado.

Espero que esto ayude

Answer 7

Para obtener un ancho de espacio particular entre columnas, tenemos que configurar el padding en 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>

Answer 8

Puede lograr el espaciado entre columnas usando las clases col-md-offset-* , documentadas aquí . El espaciado es constante para que todas sus columnas se alineen correctamente. Para obtener un espaciado parejo y el tamaño de 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>

Answer 9

Puede lograr el espaciado entre columnas utilizando las clases col-xs- *, dentro de un col-xs- * div codificado a continuación. El espaciado es constante para que todas sus columnas se alineen correctamente. Para obtener un espaciado parejo y el tamaño de 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>

Answer 10

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

Answer 11

Solo borde blanco alrededor del elemento de ajuste

.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 primero + último hijo sin frontera

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

Answer 12

Tenía que descubrir cómo hacer esto para 3 columnas. Quería rodear las esquinas de los divs y no podía hacer que el espaciado funcionara. Usé márgenes. En mi caso, calculé que el 90% de la pantalla se rellenaría con los divs y el 10% con 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 hacer que cambie el tamaño correctamente para dispositivos móviles, hice que el CSS cambiara el ancho del 30% al width:92.5%; en @media (max-width:1023px)

Answer 13

Usa bootstraps

.form-group

clase. Me gusta esto en tu caso:

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

Answer 14

es simple ... tienes que añadir un borde sólido a la derecha, a la izquierda para 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;
}

Answer 15

puede usar background-clip y box-model con border proprety

.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>

Answer 16

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;

Answer 17

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

Answer 18

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

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

Answer 19

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