Bootstrap – Cómo eliminar el canal entre columnas

No sé si es la forma correcta de hacerlo, pero ¿cómo puedo eliminar el canal de 30 píxeles entre las columnas? Pero sin margen izquierdo: -30px establecido.

Una mejor forma de eliminar el relleno en las columnas sería agregar una clase .no-pad a .row :

  

… y luego agrega este CSS.

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

Es una mala idea buscar elementos del first- y last-child , ya que en realidad el .row está destinado a encargarse de esas compensaciones a la derecha e izquierda de la ventana .row . Con el método anterior, todos los .col-* s siguen siendo idénticos, lo que también es mucho más simple cuando se considera la capacidad de respuesta, especialmente el astackmiento en los tamaños móviles (pruebe mi demostración por debajo del tamaño md ).

El selector CSS descendiente directo > significa que el .no-pad solo se aplicará a .row s .col inmediatos de .col s, de modo que puede tener relleno en estructuras de columnas anidadas posteriormente (o no) si lo desea.

Además, usar el selector de atributos [class*='col-'] significa que cada columna no necesita agregar clases adicionales que no sean Bootstrap.

Aquí hay una demostración: http://www.bootply.com/Ae3xTyAW5D

Actualización 2018

Bootstrap 4 ahora incluye una clase .no-gutters que puedes agregar al .row .

  
x
x
x

Bootstrap 4: http://www.codeply.com/go/OBW3RK1ErD


Bootstrap 3 canalones se crean con relleno. También debe ajustar el margen negativo para que el espaciado alrededor de las columnas externas no se vea afectado.

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

Simplemente agregue la clase de no-gutter a .row .

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


En lugar de aplicar arreglos que son difíciles de mantener, le sugiero que genere su propia versión personalizada de Bootstrap desde el Personalizador, donde puede establecer el margen al tamaño que desee (o eliminarlo por completo, configurándolo en 0).