Cómo eliminar el espacio de canalón para un div específico en Bootstrap

Como Eliminar El Espacio De Canalon Para Un Div Especifico En Bootstrap



El sistema de cuadrícula Bootstrap consta de muchos contenedores, filas y columnas para el diseño y la alineación del contenido. El sistema de cuadrícula estableció una fila con 12 columnas virtuales para hacer que las páginas web respondan completamente. Sin embargo, hay relleno o espacios alrededor o entre las columnas. Estos espacios se conocen como “ espacios de canalones ”.

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

¿Qué es Gutter Space en Bootstrap?

Los canalones son los espacios o huecos entre las columnas producidos por el acolchado horizontal. Se utilizan para admitir espacios y alineación de contenido receptivo en el sistema de cuadrícula de Bootstrap.







La siguiente imagen muestra una fila con un borde rojo alrededor. Dentro de la fila, existen tres elementos div de igual tamaño de columnas de cuadrícula iguales. Aunque las columnas son iguales, todavía hay espacios entre ellas:





¿Cómo eliminar Gutter Space para un div específico en Bootstrap?

En Bootstrap, la clase “ sin canaletas ” se utiliza para eliminar los espacios de canalón de cualquier div.





Para este propósito:

  • Agrega un '
    ” etiqueta junto con la clase “ principal-div ”.
  • Luego, ajuste una sección de fila agregando otra '
    ” elemento con la clase “ fila ”. Como tenemos que quitar los espacios de la fila, especifica una clase “ sin canaletas ' 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:
< división clase = 'principal-div' >

< división clase = 'fila sin canaletas' >

< división clase = 'col-4' >

< división clase = 'columna-1' >< / división >

< / división >

< división clase = 'col-4' >

< división clase = 'columna-2' >< / división >

< / división >

< división clase = 'col-4' >

< división clase = 'columna-3' >< / división >

< / división >

< / división >

< / división >

CSS

En la sección CSS, las clases mencionadas en la página HTML están diseñadas con varias propiedades de estilo.



Clase de estilo 'main-div'

.main-div {

ancho : 600 píxeles;

margen: 50px automático;

}

Él ' .main-div ” se menciona para acceder al elemento div que tiene la clase “ principal-div ”. Las siguientes propiedades se aplican a esta clase:

  • ancho ” define el ancho del elemento.
  • margen ” establece el espaciado alrededor del elemento.

Clase de estilo 'fila'

.fila {

frontera : 1px rojo sólido;

}

El Bootstrap” fila La clase ” se agrega con el “ frontera ' 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 hacerlos prominentes.

Clase de estilo 'columna-1'

.columna- 1 {

antecedentes- color : turquesa;

altura : 200 píxeles;

}

Clase de estilo 'columna-2'

.columna- 2 {

antecedentes- color : Violeta;

altura : 200 píxeles;

}

Clase de estilo 'columna-3'

.columna- 3 {

antecedentes- color : amarillo verde;

altura : 200 píxeles;

}

Se puede observar que el “

” contenedor con la clase “ fila ” se ha ajustado con éxito sin espacio de canalón entre ellos:

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

Conclusión

Para eliminar espacios intermedios para un div específico, la clase ' sin canaletas ' puede ser usado. Para este propósito, agregue el “

elemento ” junto con el “ fila sin canaletas ' clase. Esta publicación ha proporcionado una guía completa sobre los espacios de canalón y cómo se pueden eliminar para un div específico en Bootstrap.