¿Cuál es la clase de fluido de contenedor de bootstrap??

El marco CSS conocido como Bootstrap ofrece una amplia variedad de clases predefinidas. Estas clases se utilizan para diseñar cualquier aplicación web rápidamente. Más específicamente, las clases de contenedores son una de ellas. Bootstrap ofrece tres tipos de clases de contenedores. Estos son "fluido de contenedores","envase", y "contenedor- punto de interrupción". Estas clases de contenedores contienen, alinean el centro y alinean el contenido y hacen que el componente responda.

Esta redacción describirá la clase de fluido de contenedores de bootstrap.

¿Cuál es la clase de bootstrap "contenedor-fluido"??

El "fluido de contenedoresSe utiliza la clase en bootstrap para proporcionar un contenedor de ancho completo. Tiene las siguientes propiedades predefinidas de CSS:

.contenedor-fluido
Ancho: 100%;
Right de relleno: 15px;
ROLED-LEFUNDA: 15px;
margen-derecha: auto;
margen-izquierda: auto;

La explicación de las propiedades CSS mencionadas anteriormente se describe a continuación:

• "ancho"La propiedad tiene un valor de"100%"Que indica que los elementos tendrán el ancho completo.
• "derrota"La propiedad está establecida con el valor de"15px", Que agrega algo de espacio en el lado derecho del contenido del elemento.
• "pesadilla"Está configurado con el valor"15px"Y agrega el espacio a la izquierda del contenido del elemento.
• "margen de derecha" y "margen de pesa"Las propiedades se establecen con el valor"auto", Que ajusta el elemento en el centro.

Cómo usar la clase Bootstrap "Container-Fluid"?

Implementemos los siguientes ejemplos para ver cómo el "fluido de contenedoresLa clase afecta el diseño de la barra de navegación de Bootstrap:

• Navbar sin el "fluido de contenedores" Clase
• Navbar con el "fluido de contenedores" Clase

Ejemplo 1: Navbar sin la clase de "Contenedor-fluido"
Creemos una barra de navegación siguiendo los pasos:

• Primero, agregue el "
• Dentro de "
• Luego, agregue el ""Elemento con la clase"navegador de Navbar". Añade el "toggle de datos" y "objetivo"Atributos y luego incluya el icono de Toggler dentro del"" etiqueta.
• El "objetivo"Atributo se asigna el"identificación"Valor, que debe ser el mismo que la" ID "de la barra de navegación.
• Luego, agregue el "Elemento, que contiene los contenidos de Navbar.
• Los elementos del navbar se especifican utilizando el "barra de navegación" clase.
• Luego, los elementos se ajustan usando el "ítem de navegación"Clase dentro de la etiqueta" ".

Html

Sin la clase de "contenedor-fluido", la barra de navegación se ve así:

Ejemplo 2: Navbar con la clase "Container-Fluid"
Añade el "fluido de contenedoresClase "dentro de la""Elemento y agregue la barra de navegación, implementada en el ejemplo anterior, dentro de este elemento" ":

Producción

Has aprendido con éxito sobre la bootstrap "fluido de contenedores" clase.

Conclusión

El "fluido de contenedores"La clase en Bootstrap proporciona contenedores de ancho completo para los componentes. Esta clase tiene el CSS predefinido "ancho"Propiedad con el valor"100%". Para crear la barra de navegación con un ancho de respuesta receptiva, asigne el "fluido de contenedores"Clase para el"