Cómo eliminar el espacio de canalones para un DIV específico en Bootstrap

El sistema de cuadrícula Bootstrap consta de muchos contenedores, filas y columnas para el diseño y la alineación de contenido. El sistema de cuadrícula establece una fila que tiene 12 columnas virtuales para hacer que las páginas web sean completamente receptivas. Sin embargo, hay relleno o espacios alrededor o entre las columnas. Estos espacios se conocen como "espacios de canal".

Esta publicación discutirá qué son los espacios de canalones y cómo se pueden eliminar para un DIV específico en Bootstrap.

¿Qué es el espacio de canalones en bootstrap??

Las canaletas son los espacios o espacios entre las columnas producidas por el relleno horizontal. Se utilizan para respaldar la alineación de contenido y los espacios de contenido en el sistema de cuadrícula Bootstrap.

A continuación, la imagen dada muestra una fila con un borde rojo a su alrededor. Dentro de la fila, existen tres elementos DIV de igual tamaño de columnas de cuadrícula igualitaria. Aunque las columnas son iguales, todavía hay espacios de canalones entre ellas:

Cómo eliminar el espacio de canalones para un DIV específico en Bootstrap?

En Bootstrap, la clase "no gigante"Se utiliza para eliminar los espacios de canalones de cualquier div.

Para este propósito:

• Agrega un ""Etiqueta junto con la clase"principal".
• Luego, ajuste una sección de fila agregando otra ""Elemento con la clase"fila". Como tenemos que eliminar los espacios de la fila, especifique una clase "no gigante" dentro de ella.
• Para dividir la fila de la cuadrícula en tres columnas iguales, utilice la clase "Col-4".
• Dentro del contenedor "" de cada columna, ajuste los "" elementos con clases "columna-1","columna-2", y "columna 3", Respectivamente:

CSS

En la sección CSS, las clases mencionadas en la página HTML tienen varias propiedades de estilo.

Clase de estilo "Main-Div"

.principal-div
Ancho: 600px;
Margen: 50px Auto;

El ".principal"Se menciona para acceder al elemento div que tiene clase"principal". Las siguientes propiedades se aplican a esta clase:

• "ancho"Define el ancho del elemento.
• "margen"Establece el espacio alrededor del elemento.

Clase de estilo "fila"

.fila
borde: 1px rojo sólido;

El bootstrap "fila"La clase se agrega con el"borde" propiedad. Esto envolverá la fila de la cuadrícula en un ancho, estilo y borde de color especificados.

Las tres clases "columna-1","columna-2", y "columna 3"Se les asigna el CSS"color de fondo" y "altura"Propiedades para hacerlas prominentes.

Clase de estilo "Column-1"

.columna-1
Color de fondo: turquesa;
Altura: 200px;

Clase de estilo "Column-2"

.columna-2
color de fondo: violeta;
Altura: 200px;

Clase de estilo "columna 3"

.columna 3
Color de fondo: Yellowgreen;
Altura: 200px;

Se puede observar que el ""Contenedor con la clase"fila"Se ha ajustado con éxito sin espacio de canaleta entre ellos:

Le hemos enseñado cómo eliminar el espacio de canalones para un div específico en bootstrap.

Conclusión

Para eliminar los espacios de canalones para un DIV específico, la clase "no gigante" puede ser usado. Para este propósito, agregue el ""Elemento junto con el"Row No Gutters" clase. Esta publicación ha proporcionado una guía completa sobre los espacios de canalones y cómo se pueden eliminar para un DIV específico en Bootstrap.