Quelle est la classe de contenant-fluid bootstrap?

Le cadre CSS connu sous le nom de bootstrap offre une grande variété de classes prédéfinies. Ces classes sont utilisées pour concevoir une application Web rapidement. Plus précisément, les classes de conteneurs sont l'une d'entre elles. Bootstrap propose trois types de cours de conteneurs. Ceux-ci sont "conteneur-fluide","récipient", et "conteneur- point d'arrêt". Ces classes de conteneurs contiennent, central aligner et remplir le contenu et rendre le composant réactif.

Cette rédaction décrira la classe de conteneur-fluide bootstrap.

Quelle est la classe Bootstrap «Container-Fluid»?

Le "conteneur-fluide«La classe en bootstrap est utilisée pour fournir un conteneur pleine largeur. Il possède les propriétés prédéfinies CSS suivantes:

.conteneur-fluid
Largeur: 100%;
padding-droite: 15px;
Padding-Left: 15px;
marge droite: auto;
marge-gauche: auto;

L'explication des propriétés CSS mentionnées ci-dessus est décrite ci-dessous:

• "largeur"La propriété a une valeur de"100%«Ce qui indique que les éléments auront la pleine largeur.
• "rembourrage«La propriété est définie avec la valeur de«15px», Qui ajoute de l'espace sur le côté droit du contenu de l'élément.
• "rembourrage à gauche"Est défini avec la valeur"15px»Et ajoute l'espace à gauche du contenu de l'élément.
• "marge à droite" et "marge-gauche"Les propriétés sont définies avec la valeur"auto», Qui ajuste l'élément au centre.

Comment utiliser la classe Bootstrap «Container-Fluid»?

Mise en œuvre des exemples suivants pour voir comment le «conteneur-fluide«La classe affecte la disposition de la barre de navigation bootstrap:

• Navbar sans le «conteneur-fluide" Classe
• Navbar avec le «conteneur-fluide" Classe

Exemple 1: Navbar sans la classe «conteneur-fluide»
Créons une barre de navigation en suivant les étapes:

• Tout d'abord, ajoutez le "
• À l'intérieur de "
• Ensuite, ajoutez le ""Élément avec la classe"Navbar-Toggler". Ajouter le "data-toggle" et "cible de données«Attributs, puis incluez l'icône de toggler dans le«" étiqueter.
• Le "cible de données«L'attribut se voit attribuer le«identifiant«Valeur, qui doit être la même que« l'ID »de la barre navale.
• Ensuite, ajoutez le "”Élément, qui contient le contenu de la barre navale.
• Les éléments du Navbar sont spécifiés à l'aide du «barre naval" classe.
• Ensuite, les éléments sont ajustés à l'aide du «Naval-Item«Classe dans la balise« ».

Html

Sans la classe «conteneur-fluide», la barre de navigation ressemble à ceci:

Exemple 2: Navbar avec la classe «conteneur-fluide»
Ajouter le "conteneur-fluide"Classe dans le"”Element et ajoutez la barre de navigation, implémentée dans l'exemple précédent, à l'intérieur de cet élément« »:

Sortir

Vous avez réussi à découvrir le bootstrap "conteneur-fluide" classe.

Conclusion

Le "conteneur-fluide”La classe en bootstrap fournit des conteneurs pleine largeur pour les composants. Cette classe a le CSS prédéfini "largeur«Propriété avec la valeur»100%". Pour créer le Navbar avec une largeur réactive et pleine largeur, affectez le «conteneur-fluide«Classe au«