twitter bootstrap - container - Bootstrap 3 Gutter Size

center col bootstrap (8)

Recién comencé a trabajar con bootstrap y no estoy seguro de cómo lograr mi objetivo.

Me gustaría que todos los canales sean iguales, como en esta imagen:

por defecto, se ven así, los canales verticales entre columnas (marcados con azul) son el doble de los canales horizontales y externos:

Cualquier ayuda sobre la mejor manera de resolver esto probablemente sería apreciada.

@Bass Jobsen y @ElwoodP intentaron responder esta pregunta a la inversa, dando a los márgenes exteriores el mismo DOBLE tamaño que los canales. El OP (y yo, también) estaba buscando una forma de tener un canal de un solo tamaño en todos los lugares. Aquí están los ajustes de CSS correctos para hacerlo:

.row { margin-left: -7px; margin-right: -7px; } .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 { padding-left: 7px; padding-right: 7px; } .container { padding-left: 14px; padding-right: 14px; }

Esto deja un margen de 14px y margen exterior en todos los lugares.

Agregue estas clases de ayuda a stylesheet.less (puede usar http://less2css.org/ para compilarlas en CSS)

.row.gutter-0 { margin-left: 0; margin-right: 0; [class*="col-"] { padding-left: 0; padding-right: 0; } } .row.gutter-10 { margin-left: -5px; margin-right: -5px; [class*="col-"] { padding-left: 5px; padding-right: 5px; } } .row.gutter-20 { margin-left: -10px; margin-right: -10px; [class*="col-"] { padding-left: 10px; padding-right: 10px; } }

Y así es como puedes usarlo en tu HTML:

Frente a este problema, hice la siguiente adición a mi hoja de estilo css:

#mainContent .container { padding-left:16px; padding-right:16px; } #mainContent .row { margin-left: -8px; margin-right: -8px; } #mainContent .col-xs-1, #mainContent .col-sm-1, #mainContent .col-md-1, #mainContent .col-lg-1, #mainContent .col-xs-2, #mainContent .col-sm-2, #mainContent .col-md-2, #mainContent .col-lg-2, #mainContent .col-xs-3, #mainContent .col-sm-3, #mainContent .col-md-3, #mainContent .col-lg-3, #mainContent .col-xs-4, #mainContent .col-sm-4, #mainContent .col-md-4, #mainContent .col-lg-4, #mainContent .col-xs-5, #mainContent .col-sm-5, #mainContent .col-md-5, #mainContent .col-lg-5, #mainContent .col-xs-6, #mainContent .col-sm-6, #mainContent .col-md-6, #mainContent .col-lg-6, #mainContent .col-xs-7, #mainContent .col-sm-7, #mainContent .col-md-7, #mainContent .col-lg-7, #mainContent .col-xs-8, #mainContent .col-sm-8, #mainContent .col-md-8, #mainContent .col-lg-8, #mainContent .col-xs-9, #mainContent .col-sm-9, #mainContent .col-md-9, #mainContent .col-lg-9, #mainContent .col-xs-10, #mainContent .col-sm-10, #mainContent .col-md-10, #mainContent .col-lg-10, #mainContent .col-xs-11, #mainContent .col-sm-11, #mainContent .col-md-11, #mainContent .col-lg-11, #mainContent .col-xs-12, #mainContent .col-sm-12, #mainContent .col-md-12, #mainContent .col-lg-12 { padding-left: 8px; padding-right: 8px; }

Esto anula el estilo predeterminado de arranque y hace que los lados izquierdo y derecho y el canal tengan el mismo ancho.

He estado atascado con este problema, mi solución fue crear una mixin que me permite especificar en SCSS, el tamaño real del canal que quiero ...

Solución: 1)

@mixin add-gutter($size) { margin-right: -$size; margin-left: -$size; > [class*="col-"] { padding-right: $size; padding-left: $size; } } .that-special-row{ @include add-gutter(7px); }

Y para usarlo ...

<div class="row that-special-row"></div>

La solución real surgió de esta cuestión mencionada en github, que creo que aborda el mismo problema.

Solución: 2)

Otra solución sería simplemente crear su clase de CSS personalizada

.small-gutters { margin-right: -10px; margin-left: -10px; > [class*="col-"] { padding-right: 10px; padding-left: 10px; } }

¡Espero que ayude!

No creo que la respuesta de Bass sea correcta. ¿Por qué tocar los márgenes de la fila? Tienen un margen negativo para compensar el relleno de la columna para las columnas en el borde de la fila. Jugar con esto romperá cualquier hilera anidada.

La respuesta es simple, solo haga que el relleno del contenedor sea igual al tamaño del canal:

por ejemplo, para el arranque predeterminado:

.container { padding-left:30px; padding-right:30px; }

http://jsfiddle.net/3wBE3/61/

Puede mantener el comportamiento predeterminado (con el canal) y agregar una clase a su hoja de estilo CSS para tareas como la suya:

.no-gutter > [class*=''col-''] { padding-right:0; padding-left:0; }

Y así es como puedes usarlo en tu HTML:

<div class="row no-gutter"> <div class="col-md-4"> ... </div> <div class="col-md-4"> ... </div> <div class="col-md-4"> ... </div> </div>

Si usa sass en su propio proyecto, puede anular el tamaño predeterminado del canal de arranque copiando las variables sass del archivo _variables.scss de bootstrap en el archivo sass de su propio proyecto en alguna parte, como por ejemplo:

// Grid columns // // Set the number of columns and specify the width of the gutters. $grid-gutter-width-base: 50px !default; $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 ) !default;

Ahora sus canaletas serán 50px en vez de 30px. Encuentro que este es el método más limpio para ajustar el tamaño de la canaleta.

tratar:

.row { margin-left: 0; margin-right: 0; }

Cada columna tiene un relleno de 15 px en ambos lados. Lo que hace que un canal entre 30 px. En el caso de sm-grid, su clase de contenedor será 970px (((940px + @ grid-gutter-width))). Cada columna tiene un ancho de 940/12. El @ resultante-grid-gutter-width / 2 en ambos lados de la cuadrícula se ocultará con un margen negativo de - 15px ;. Al deshacer este margen izquierdo negativo, se establece un margen de 30 px en ambos lados de la cuadrícula. Esta cuneta se construye con un relleno de 15px de la columna + 15 px de espacio en la red de descanso.

actualizar

En respuesta a la respuesta de @ElwoodP, considere el siguiente código:

En el caso de la anidación, la manipulación de la clase .row influye de hecho en la subred. El bien o el error depende de sus expectativas / requisitos para la subred. Cambiar el margen de .row no romperá la sub grilla.

defecto:

margen de la clase `.row`

con:

.row { margin-left: 0; margin-right: 0; }

relleno de la clase `.container`