Eine Erklärung des Unterschieds zwischen Container und Container_Fluid-Außencontainer 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.

　.container-Klasse wird für Container mit fester Breite verwendet und unterstützt responsives Layout.

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.

Der folgende Code dient 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;
}

Der obige Inhalt ist der äußere Container von Container und Container_Fluid in Bootstrap3 Ich werde die Unterschiede erklären, ich hoffe, es hilft allen.

Verwandte Empfehlungen:

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

So lernen Sie Bootstrap3 schnell 3.2

Bootstrap3 – Neue Funktionen

Das obige ist der detaillierte Inhalt vonEine Erklärung des Unterschieds zwischen Container und Container_Fluid-Außencontainer in Bootstrap3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!