Explication détaillée du conteneur externe containers et containers_fluid dans bootstrap3

Cet article présente principalement la différence entre containers et containers_fluid dans ootstrap3 et .container_fluid sont deux types différents de conteneurs externes dans bootstrap. Les amis dans le besoin peuvent s'y référer, j'espère que cela pourra aider tout le monde.

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

La classe .container est utilisée pour fixer la largeur. et des conteneurs prenant en charge une mise en page réactive.

　.la classe conteneur-fluide 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 elle est adaptative.

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;
}

Recommandations associées :

À propos de la façon de transmettre Hyper- dans Windows Server2016 détaillé explication de l'installation en V de Liunx Container (photo)

APP WEB Laravel basée sur l'événement conteneur Container Event

À propos de Container, Command Bus dans Laravel5 , Événement

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!