Une explication de la différence entre le conteneur et le conteneur externe containers_fluid dans bootstrap3

.container et .container_fluid sont deux types différents de conteneurs externes dans bootstrap. Cet article présente principalement la différence entre containers et containers_fluid dans bootstrap3. Les amis dans le besoin peuvent s'y référer.

　.la classe conteneur est utilisée pour les conteneurs à largeur fixe et prend en charge la mise en page réactive.

La classe .container-fluid est utilisée pour les conteneurs d'une largeur de 100 % et occupant toute la fenêtre d'affichage.

La largeur dite fixe ne permet pas aux développeurs de définir eux-mêmes la largeur du conteneur, mais bootstrap utilise des requêtes multimédias en interne basées sur la largeur de l'écran pour nous aider à définir une largeur fixe, et c'est adaptatif.

degré, et il est adaptatif. En aucun cas vous ne devez définir manuellement une valeur de largeur fixe pour le conteneur de mise en page externe dans une mise en page réactive.

.container-fluid est automatiquement défini sur 100 % de la fenêtre extérieure. Si la fenêtre extérieure est du corps, elle sera affichée en plein écran quelle que soit la taille de l'écran, et une mise en page réactive sera automatiquement mise en œuvre.

Ce qui suit est le code emprunté à titre de référence uniquement :

/*0-768px以上宽度container为100%*/
.container {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}
/*768-992px以上宽度container为750px*/
@media (min-width: 768px) {
 .container {
 width: 750px;
 }
}
/*992-1200px以上宽度container为970px*/
@media (min-width: 992px) {
 .container {
 width: 970px;
 }
}
/*1200px以上宽度container为1170px*/
@media (min-width: 1200px) {
 .container {
 width: 1170px;
 }
}
/*container-fluid为100%*/
.container-fluid {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}

Le contenu ci-dessus est le conteneur externe de containers et containers_fluid dans bootstrap3 Je vais vous expliquer les différences, j'espère que cela aidera tout le monde.

Recommandations associées :

Apprentissage Bootstrap3.0 (1)_html/css_WEB-ITnose

Comment apprendre rapidement bootstrap3 .3.2

Bootstrap3-Nouvelles fonctionnalités

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!