Cómo eliminar el espacio de la canaleta solo para un div específico – bootstrap

El sistema de grilla Bootstrap predeterminado utiliza 12 columnas con cada tramo que tiene una canaleta de 30 píxeles como se muestra a continuación. Los canaletas son el espacio blanco entre las columnas. El ancho del canal parece estar entre 20px – 30px. Supongamos que es 30px aquí.

enter image description here

Quiero eliminar el espacio de la canaleta para un div específico, de modo que no haya espacio en el margen en la fila. Cada tramo estará al lado del otro sin canaleta.

El problema es que si elimino el margen 30px (canaleta) deja 360px (12 * 30) al final de la fila.

Dado que quiero eliminar el espacio de la canaleta solo para un div específico. Supongamos que es para div que están en el div principal_contenido.

 div#main_content div{ /* no gutter for the divs in main_content */ } 

¿Cómo puedo eliminar la canaleta de un div específico sin perder la capacidad de respuesta de arranque y no dejar espacio al final de la fila?

Para Bootstrap 3.0 o superior, mira esta respuesta

Solo estamos viendo la clase .span1 aquí (una columna en una grilla de 12 de ancho), pero puede lograr lo que desea eliminando el margen izquierdo de:

 .row-fluid [class*="span"] { margin:0 } // line 571 of bootstrap responsive 

A continuación, cambie .row-fluid .span1 ‘s ancho para que sea igual a 100% dividido por 12 columnas (8.3333%).

 .row-fluid .span1 { width: 8.33334% } // line 632 of bootstrap responsive 

Puede hacer esto agregando una clase adicional que le permita dejar intacto el sistema de grilla base:

 .row-fluid [class*="NoGutter"] { margin-left:0 } .row-fluid .span1NoGutter { width: 8.33334% } 
1

También podría repetir este patrón para todas las demás columnas:

 .row-fluid .span2NoGutter { width:16.66667%; margin-left:0 } // 100% / 6 col .row-fluid .span4NoGutter { width:25%; margin-left:0 } // 100% / 4 col .row-fluid .span3NoGutter { width:33.33333%; margin-left:0 } // 100% / 3 col or .row-fluid .span4NoGutter { width:25% } .row-fluid [class*="NoGutter"] { margin-left:0 } 

* EDITAR (insistiendo en usar la grilla predeterminada)
Si el sistema de cuadrícula predeterminado es un requisito, tiene un ancho predeterminado de 940px (es decir, las clases .container y .span12); por lo tanto, en términos más simples, querría dividir 940 entre 12. Eso equivale a 12 contenedores de 78.33333px de ancho.

Así que la línea 339 de bootstrap.css podría editarse así:

 .span1 { width:78.33333px; margin-left:0 } or .span1 { width:8.33334%; margin-left:0 } // this should render at 78.333396px (78.333396 x 12 = 940.000752) 

Actualización 2018

Para Bootstrap 3 , es mucho más fácil. Bootstrap 3 ahora usa relleno en lugar de márgenes para crear el “canal”.

 .row.no-gutter { margin-left: 0; margin-right: 0; } .row.no-gutter [class*='col-']:not(:first-child), .row.no-gutter [class*='col-']:not(:last-child) { padding-right: 0; padding-left: 0; } 

A continuación, solo agregue no-gutter a las filas donde se va a eliminar el espaciado:

  
1
1
1

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

Bootstrap 4 (no se necesita CSS adicional)

Bootstrap 4 incluye una clase no-gutters que se puede aplicar a toda la row :

http://www.codeply.com/go/pVsGQZVVtG

 
..
..
..

También hay nuevas utilidades de espaciado que permiten el control de relleno / márgenes. Así que esto se puede usar para cambiar el relleno (canaleta) de una sola columna (es decir:

) establece padding-left:0; en la columna, o use px-0 para eliminar el relleno izquierdo y derecho (eje x).

Actualización: enlace para TWBS 3 getbootstrap.com/customize/#grid-system


Twitter Bootstrap ofrece un formulario personalizado para descargar todos o algunos componentes con configuración personalizada.

Puede usar este formulario para descargar una cuadrícula sin canaletas, y responderá: solo necesita el componente de cuadrícula y los receptivos relacionados con el ancho.

Demo (jsfiddle) red personalizada

Si conoce un poco sobre LESS , puede incluir el CSS generado en un selector de su elección.

 /* LESS */ .some-thing { /* The custom grid ... */ } 

De lo contrario, debe agregar este selector al frente de cada regla (no mucho de todos modos).


Si conoce LESS y usa las secuencias de comandos LESS para administrar sus estilos, es posible que desee utilizar directamente la grilla mixins v2 (github)

Grid mixins v3 (github)

El ancho total se calcula con el ancho de los elementos más el ancho del espacio del margen. Si desea eliminar el margen de margen, está bien, pero para evitar esa brecha que mencionó, también necesita boost el ancho de las columnas.

En este caso, necesita boost el ancho de una sola columna por su espacio de margen eliminado, que sería 30px.

Digamos que el ancho de tus columnas es 50PX normalmente con un margen de margen de 30PX. Elimine el espacio del margen y haga un ancho de 80PX.

Ejemplo 4 columnas de span3. Para otros anchos de tramo use ancho nuevo = ancho antiguo + tamaño de canaleta. Use las consultas de los medios para que sea receptivo.

css:

   

html:

 
...
...
...
...

...
...
...
...

actualización : o divide un span12 div en 100 / numberofcolumns% width partes flotando a la izquierda:

 
...
...
...
...

Para ambas soluciones, ver: http://bootply.com/61557

Interesante…

Eliminando la canaleta en la cuadrícula predeterminada de Twitter Bootstrap, es decir, 940px de ancho. Y que la cuadrícula predeterminada tiene un contenedor de 940px de ancho y tiene el bootstrap-responsive.css en su hoja de estilo.

Si entendí bien tu pregunta, así es como lo hice …

     Stackoverflow Question           
01
02
03
04
05
06
07
08
09
10
11
12
1
2
3
4

Y el resultado es …

enter image description here

El lapso de 4 div sin canal se mantendrá extendido para el paisaje de tableta pequeña (800×600). Cualquier tamaño más pequeño que eso colapsará los 4 divs y se astackrá verticalmente. Por supuesto, tendrá que ajustarlo para que se ajuste a sus necesidades.

La forma más sencilla de eliminar el relleno y el margen es con CSS simple.

 
..... ..... .....

De acuerdo Si quiere cambiar el canal dentro de una fila, pero quiere que esos (primeros y últimos) divisores internos se alineen con la cuadrícula que rodea la fila .no-gutter , puede copiar, pegar y combinar la mayoría de las respuestas en el siguiente fragmento:

 .row.no-gutter [class*='col-']:first-child:not(:only-child) { padding-right: 0; } .row.no-gutter [class*='col-']:last-child:not(:only-child) { padding-left: 0; } .row.no-gutter [class*='col-']:not(:first-child):not(:last-child):not(:only-child) { padding-right: 0; padding-left: 0; } 

Si te gusta tener un canal más pequeño en lugar de ninguno, simplemente cambia los 0 a lo que te gusta … (por ejemplo: 5px para obtener 10px cuneta).

Para agregar a Skelly’s Bootstrap 3 sin canal de respuesta arriba ( https://stackoverflow.com/a/21282059/662883 )

Agregue lo siguiente para evitar canaletas en una fila que contiene solo una columna (útil cuando se usa el ajuste de columnas: http://getbootstrap.com/css/#grid-example-wrapping ):

 .row.no-gutter [class*='col-']:only-child, .row.no-gutter [class*='col-']:only-child { padding-right: 0; padding-left: 0; }