html - quitar - Bootstrap: agregue margen/espacio de relleno entre las columnas

espacio vertical bootstrap

Question

Estoy tratando de poner un margen extra / espacio de relleno entre columnas en mi diseño de cuadrícula de Bootstrap. Lo he intentado pero no me gusta el resultado. Aquí está mi código:

    <div class="row">
        <div class="text-center col-md-6">
            Widget 1
        </div>
        <div class="text-center col-md-6">
            Widget 2
        </div>
    </div>

Quiero agregar margin: 10px y padding:10px . Algunas personas sugieren cambiar sus clases a col-md-5 con pull-left y pull-right , pero la brecha entre ellas será demasiado grande.

Answer 1

En el otro lado, si desea eliminar el doble relleno entre las columnas, simplemente agregue la clase "nogap" dentro de la fila

<div class="row nogap">
    <div class="text-center col-md-6">Widget 1</div>
    <div class="text-center col-md-6">Widget 2</div>
</div>

y crear una clase CSS adicional para ello

.nogap > .col{ padding-left:7.5px; padding-right: 7.5px}
.nogap > .col:first-child{ padding-left: 15px; }
.nogap > .col:last-child{ padding-right: 15px; }

Eso es todo, consulte aquí: https://codepen.io/michal-lukasik/pen/xXvoYJ

Answer 2

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">
     Set room heater temperature
   </div>
 </div>
 <div class="col-md-6">
   <div class="col-md-12">
     Set room heater temperature
   </div>
 </div>
</div>

Esto automáticamente dejará espacio entre los 2 divs.

Answer 3

Mantendría una columna adicional en el medio para pantallas más grandes y restablecer a las predeterminadas cuando las columnas colapsen en pantallas más pequeñas. Algo como esto:

    <div class="row">
        <div class="text-center col-md-5 col-sm-6">
            Widget 1
        </div>
        <div class="col-md-2">
            <!-- Gap between columns -->
        </div>
        <div class="text-center col-md-5 col-sm-6">
            Widget 2
        </div>
    </div>

Answer 4

Para los más curiosos, también he encontrado que agregar

border: 5px solid white

o cualquier otra variante de tu agrado, para que se mezcle, funciona magníficamente.

Answer 5

Prueba esto:

 <div class="row">
    <div class="text-center col-md-6">
       <div class="col-md-12"> 
          Widget 1
       </div>
    </div>
    <div class="text-center col-md-6">
        <div class="col-md-12"> 
          Widget 2
        </div>
    </div>
</div>

Answer 6

Prueba esto:

<div class="row">
      <div class="col-md-5">
         Set room heater temperature
     </div>
     <div class="col-md-2"></div>
     <div class="col-md-5">
         Set room heater temperature
     </div>
</div>

Answer 7

Súper fácil con flexbox. Deje espacio para un espacio cambiando las columnas a col-md-5

<div class="row widgets">
    <div class="text-center col-md-5">
        Widget 1
    </div>
    <div class="text-center col-md-5">
        Widget 2
    </div>
</div>

CSS

.widgets {
    display: flex;
    justify-content: space-around;
}

Answer 8

Simplemente agregue un div dentro de col-md-6 que tenga el relleno adicional que necesita. El col-md-6 es la "columna vertebral" para mantener la integridad de la columna, pero puede agregar relleno adicional dentro de ella.

<div class="row">
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 1</div>
    </div>
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 2</div>
    </div>
</div>

CSS

.classWithPad { margin:10px; padding:10px; }

Answer 9

Actualización 2018

Bootstrap 4 ahora tiene utilidades de espaciado que facilitan la adición (o resta) del espacio (canal) entre las columnas. CSS adicional no es necesario .

<div class="row">
    <div class="text-center col-md-6">
        <div class="mr-2">Widget 1</div>
    </div>
    <div class="text-center col-md-6">
        <div class="ml-2">Widget 2</div>
    </div>
</div>

Puede ajustar los márgenes en los contenidos de la columna utilizando los márgenes utils como ml-0 (margen-izquierda: 0), mr-0 (margen-derecha: 0), mx-1 (márgenes izquierdos y derechos de 25 meses), etc. ..

O bien, puede ajustar el relleno en las columnas (col- *) utilizando utilidades de relleno como pl-0 (relleno-izquierda: 0), pr-0 (relleno-derecho: 0), px-2 (.50rem izquierda y acolchado correcto), etc.

Demostración de espacio entre columnas Bootstrap 4

Notas

• Cambiar los márgenes izquierdo / derecho en col-* romperá la grilla.
• Cambie los márgenes izquierdo / derecho en el contenido de col-* works.
• Cambiar el relleno izquierdo / derecho en el col-* también funciona.