margin - examples - Cómo ajustar la canaleta en el sistema de rejilla Bootstrap 3?

container-fluid bootstrap 4

Question

El nuevo sistema de grilla Bootstrap 3 es genial. Es más potente para un diseño receptivo en todos los tamaños de pantalla y mucho más fácil para anidados.

Pero tengo un problema que no pude resolver. ¿Cómo agrego un espacio preciso entre las columnas? Digamos que tengo un contenedor de 960px, 3 columnas a 310px y 2 cunetas a 15px entre 3 columnas. ¿Cómo puedo hacer eso?

Answer 1

Para definir una cuadrícula de 3 columnas, puede usar el customizer o descargar la fuente, configurar menos variables y volver a compilar.

Para obtener más información acerca de la cuadrícula y el ancho de columnas / canalones, lea también:

• Bootstrap 3: ¿configurar el ancho del contenedor a 940 px máximo para computadoras de escritorio?
• ¿Por qué Bootstrap 3 fuerza el ancho del contenedor a ciertos tamaños?
• Bootstrap 3 Gutter Size
• ¿Reduce la canaleta (por defecto 30px) en dispositivos más pequeños en Bootstrap3?

En su caso, con un contenedor de 960px considere la cuadrícula mediana (consulte también: http://getbootstrap.com/css/#grid ). Esta grilla tendrá un ancho máximo de contenedor de 970px. Cuando se establece @grid-columns:3; y establecer @grid-gutter-width:15px; en variables.less obtendrás:

15px | 1st column (298.33) | 15px | 2nd column (298.33) |15px | 3th column (298.33) | 15px

Answer 2

Puede crear una clase CSS para esto y aplicarla a sus columnas. Dado que el canal (espaciado entre columnas) se controla mediante relleno en Bootstrap 3, ajuste el relleno en consecuencia:

.col {
padding-right:7px;
padding-left:7px;
}

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

EDITAR Si solo desea el espaciado entre columnas, puede seleccionar todas las columnas excepto la primera y la última, como esta.

.col:not(:first-child,:last-child) {
padding-right:7px;
padding-left:7px;
}

http://bootply.com/93473

Answer 3

(Publicado en nombre del OP).

Creo que lo descubrí.

En mi caso, agregué [class*="col-"] {padding: 0 7.5px;}; .

Luego se agregó .row {margin: 0 -7.5px;} .

Esto funciona bastante bien, excepto que hay un margen de 1px en ambos lados. Así que acabo de hacer .row {margin: 0 -7.5px;} para .row {margin: 0 -8.5px;} , entonces funciona perfectamente.

No tengo idea de por qué hay un margen de 1px. Tal vez alguien puede explicarlo?

Ver la muestra que creé:

Demo
Code