W3CSS：流暢的布局使頁面居中嗎？

Question

我使用W3CSS構建響應站點。 為了使我認為的頁面居中，我將使用它們提供的12列系統。 所以我做了這樣的事情：

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

我必須將w3-container類分配給w3-col 。 否則，布局將無法正常工作。 添加w3-container的不利之處在於，w3顏色類不再適用。 這正是我的問題 ：我希望圍繞content-div的兩個div具有某種顏色。 但是背景色將不適用。 既不添加w3-類，也不通過CSS手動添加它。

這是整個JSFiddle： https ：//jsfiddle.net/timothys_monster/kp445w0u/10/

Answer 1

您需要為選定的父元素使用.w3-content類，然后為其設置max-width，例如1200px左右。 在其中，您可以根據需要使用12列網格。 在這里檢查