Nuestros programadores estrellas han agotado sus provisiones de café, por su búsqueda día y noche por la solución, hasta que Gabriela halló el hallazgo en Bitbucket y hoy la compartimos contigo.
Solución:
Actualización 2018
Para Arranque 3, es mucho más fácil. Bootstrap 3 ahora usa relleno en lugar de márgenes para crear el “canalón”.
.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;
Entonces solo agrega no-gutter a cualquier fila donde se deba eliminar el espacio:
1
1
1
Demostración: http://bootply.com/107708
Bootstrap 4 (no se necesita CSS adicional)
Bootstrap 4 incluye un no-gutters clase 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. Entonces, esto se puede usar para cambiar el relleno (canalón) para una sola columna (es decir:
) conjuntos padding-left:0; en la columna, o usar px-0 para quitar el relleno izquierdo y derecho (eje x).
Para Bootstrap 3.0 o superior, vea esta respuesta
Solo estamos mirando la clase. .span1 aquí (una columna en una cuadrícula 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
Luego cambiando .row-fluid .span1El ancho de ‘s es igual al 100% dividido por 12 columnas (8.3333%).
.row-fluid .span1 width: 8.33334% // line 632 of bootstrap responsive
Es posible que desee hacer esto agregando una clase adicional que le permita dejar intacto el sistema de cuadrícula 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 cuadrícula predeterminada)
Si el sistema de cuadrícula predeterminado es un requisito, el ancho predeterminado es de 940 px (es decir, las clases .container y .span12); por lo tanto, en términos más simples, querrá dividir 940 por 12. Eso equivale a 12 contenedores de 78.33333px de ancho.
Entonces, 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: 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 canales, y responderá: solo necesita el componente de la cuadrícula y los que respondan con respecto al ancho.
Demostración (jsfiddle)
Si sabe 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 delante de cada regla (no tanto de todos modos).
Si sabe MENOS y usa los scripts MENOS para administrar sus estilos, es posible que desee usar directamente Grid mixins v2 (github)
Combinaciones de cuadrícula v3 (github)