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

我不得不将 class w3-container 分配给 w3-col。否则布局将无法工作。添加 w3-container 的缺点是，w3-color-classes 将不再适用。这正是 我的问题：我希望内容-div 周围的两个 div 具有特定的颜色。但是背景颜色不适用。既不是通过添加 w3-class 也不是通过 CSS.

手动添加

这是整个 JSFiddle： https://jsfiddle.net/timothys_monster/kp445w0u/10/

Answer 1

您需要为选定的父元素使用 .w3-content class，然后您应该为其设置最大宽度，例如 1200px 左右。在其中，您可以根据需要使用 12 列网格。检查 here

W3CSS：流体布局使页面居中？

W3CSS: fluid layout to center the page?

html

css

fluid-layout