Ich benutze das W3CSS um eine responsive Seite zu erstellen. Um die Seite zu zentrieren dachte ich, ich würde das 12-Säulen-System verwenden, das sie zur Verfügung stellen. Also habe ich so etwas wie dieses:W3CSS: Fluid-Layout zum Zentrieren der Seite?
<div class="w3-container">
<div class="w3-row">
<div class="w3-col m2 l3 w3-container w3-blue"></div>
<div class="w3-col m8 l6 w3-container w3-white">
<p>
Hello world!
<br>
<br>
Let's do this.
<br>
<br>
A lot of fun...
</p>
</div> <!-- Content Column -->
<div class="w3-col m2 l3 w3-container w3-red"></div>
</div> <!-- Content Container Row -->
</div> <!-- Page Container -->
ich die Klasse w3-container zum w3-col zuweisen hatte. Sonst würde das Layout nicht funktionieren. Der Nachteil beim Hinzufügen von w3-container ist, dass die w3-Farbklassen nicht mehr zutreffen. Das ist genau mein Problem: Ich möchte, dass die zwei Divs rund um den Content-Div eine bestimmte Farbe haben. Aber die Hintergrundfarbe wird nicht angewendet. Weder durch Hinzufügen der w3-Klasse noch durch manuelles Hinzufügen über CSS.
Hier ist das ganze JSFiddle: https://jsfiddle.net/timothys_monster/kp445w0u/10/
Versuchen Sie es mit Bootstrap (http://getbootstrap.com) seine viel mächtiger –
@DovBenyominSohacheski Danke für die Empfehlung, aber es ist ein bisschen _too_ mächtig für meinen Geschmack. Ich finde es im Moment einfacher, mit W3CSS zu arbeiten. Außerdem ist es einfacher, die CSS-Kerndatei im Vergleich zu Bootstrap anzupassen, denke ich. –
Können Sie Ihre Frage neu formulieren, um genau zu verstehen, was Sie erreichen möchten? –