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-color-classes将不再适用。这正是我的问题：我希望content-div周围的两个div具有一定的颜色。但背景颜色不适用。既不添加w3-class也不通过CSS手动添加。

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

Answer 1

您需要对选定的父元素使用.w3-content类，然后您应该为它设置max-width，如1200px左右。在其中，您可以根据需要使用12列网格。查看here

W3CSS：流畅的布局使页面居中？

1 个答案: