Interprétation détaillée du conteneur conteneur 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 se référer à

.container et .container_fluid sont deux types différents de conteneurs externes dans bootstrap. Selon la déclaration officielle, ces La différence entre. les deux sont :

　.la classe conteneur est utilisée pour les conteneurs à largeur fixe qui prennent 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;
}

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde à l'avenir.

Articles associés :

À propos de la configuration de la structure des dossiers dans vue

Comment configurer le proxy d'interface à l'aide de vue-cli

Comment utiliser le format de données de formulaire pour transférer des fichiers dans NodeJs

Comment implémenter le chargement paresseux d'images dans le mini programme WeChat

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!