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

【问题标题】：W3CSS: fluid layout to center the page?W3CSS：使页面居中的流畅布局？
【发布时间】：2016-04-22 05:24:23
【问题描述】：

我使用 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/

【问题讨论】：

尝试使用 bootstrap (getbootstrap.com) 会更强大
@DovBenyominSohacheski 感谢您的推荐，但它对我的口味来说有点太了。我发现目前使用 W3CSS 更容易。此外，我认为与 Bootstrap 相比，调整核心 CSS 文件更容易。
您能否重新构建您的问题以准确了解您想要完成的任务？
@DovBenyominSohacheski 完成。

标签： html css fluid-layout

【解决方案1】：

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

【讨论】：

谢谢，这确实是我想要的。也更容易实现和响应。太好了！