Viele Website-Designs erfordern einen dunklen Hintergrund mit einer helleren Vordergrundseite, die den Inhalt der Site enthält. Bei Verwendung von Bootstrap scheint es logisch, dass man nur die Lichtfarbe auf das .container-div anwendet und damit fertig wird. Der Bootstrap-Container bietet jedoch keine Auffüllung zwischen seinen Kanten und den darin enthaltenen Spalten. Daher bietet diese Lösung einen hellen Hintergrund, aber der Spalteninhalt ist bündig mit den Kanten - kein gutes Aussehen.
Dies ist ein häufiges Problem und es gibt verschiedene Lösungen für stackoverflow und anderswo für Bootstrap 2, aber ich konnte nichts finden, das für Bootstrap 3 nützlich ist.
Eine der Bootstrap 2-Lösungen beinhaltete die Verwendung von .container-fluid, die das interne Raster von Pixel- auf Prozentbasis umschaltet. Dann kann man Padding auf ein Hintergrunddiv innerhalb von .container-fluid anwenden und die internen Spalten passen sich nahtlos an. Dies schien ein guter Ansatz zu sein, aber das spezifische CSS, das verwendet wurde, um einige der anderen Stile zu optimieren, funktionierte nicht mit Bootstrap 3.
Nach dem Durchstöbern der Bootstrap-Quelle habe ich bemerkt, dass der einzige Unterschied zwischen den Regeln .container und .container-fluid in grid.less drei Medienabfragen sind. Ich habe den Inhalt meiner Seite in .container-fluid eingepackt und dann ihre Definition mit einer überschrieben, die die Medienabfragen enthielt, so dass der Seiteninhalt genauso wie die Kopf- und Fußzeile, die den Standardcontainer verwenden, antwortet.
Hier ist der HTML-Code:
%Vor%Und dann das .less:
%Vor%Dann wurde dem .page-container div: padding hinzugefügt:
%Vor%Das scheint zu funktionieren. Ich habe das Styling für die Schnittstellen, die sich in diesem Container befinden, noch nicht abgeschlossen, aber es könnte Probleme geben, aber alles scheint bisher gut zu sein.
Hier ist ein Arbeitsbeispiel für diese Lösung auf copepen.io.
Beachten Sie, dass die obige Lösung less.css nach dem Einbinden der Bootstrap-Variablen und dem Mixen von .less-Dateien verwendet. Hier ist das kompilierte CSS:
%Vor%Tags und Links css background twitter-bootstrap twitter-bootstrap-3 padding