Detaillierte Interpretation des Containercontainers in Bootstrap3

.container und .container_fluid sind zwei verschiedene Arten von Außencontainern im Bootstrap. In diesem Artikel wird hauptsächlich der Unterschied zwischen Container und Container_Fluid in Bootstrap3 vorgestellt Die beiden sind:

　. Die Containerklasse wird für Container mit fester Breite verwendet, die ein responsives Layout unterstützen.

Die Klasse .container-fluid wird für Container mit 100 % Breite verwendet, die das gesamte Ansichtsfenster einnehmen. Mit der sogenannten festen Breite können Entwickler die Breite des Containers nicht selbst festlegen, aber Bootstrap verwendet intern Medienabfragen basierend auf der Bildschirmbreite, um uns beim Festlegen einer festen Breite zu helfen. und es ist adaptiv.

Grad, und es ist anpassungsfähig. Unter keinen Umständen sollten Sie in einem responsiven Layout manuell einen festen Breitenwert für den äußeren Layout-Container festlegen.

.container-fluid wird automatisch auf 100 % des äußeren Fensters eingestellt, es wird unabhängig von der Bildschirmgröße im Vollbildmodus angezeigt und ein responsives Layout wird automatisch implementiert.

Das Folgende ist der geliehene Code nur als Referenz:

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Informationen zur Ordnerstrukturkonfiguration in Vue

So konfigurieren Sie den Schnittstellen-Proxy mit vue-cli

So verwenden Sie das Formulardatenformat zum Übertragen von Dateien in NodeJs

So implementieren Sie das verzögerte Laden von Bildern im WeChat-Miniprogramm

Das obige ist der detaillierte Inhalt vonDetaillierte Interpretation des Containercontainers in Bootstrap3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!