Detaillierte Erläuterung des Containers und des äußeren Containers „container_fluid“ in Bootstrap3

In diesem Artikel wird hauptsächlich der Unterschied zwischen Container und Container_Fluid in ootstrap3 vorgestellt. .Container und .Container_Fluid sind zwei verschiedene Arten von Außencontainern in Bootstrap. Freunde in Not können darauf verweisen, ich hoffe, es kann allen helfen.

.container und .container_fluid sind zwei verschiedene Arten von Außencontainern im Bootstrap. Laut offizieller Aussage ist der Unterschied zwischen den beiden:

Die .container-Klasse wird verwendet, um die Breite festzulegen und Container, 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 sie ist anpassungsfähig.

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

Verwandte Empfehlungen:

Informationen zum Übergeben von Hyper- in Windows Server2016 im Detail Erklärung der V-Installation von Liunx Container (Bild)

Laravel WEB APP basierend auf Container Event Container Event

Über Container, Befehlsbus in Laravel5 , Veranstaltung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Containers und des äußeren Containers „container_fluid“ in Bootstrap3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!