突破流体网格

Question

在 RWD 中，我们使用流体网格。一个例子是onepcssgrid。可以说，我为 1280px 的目标屏幕选择了 1200px。所以我们有

.onepcssgrid-1200 {
    max-width: 1220px;
}

包括边距和一些填充，我的内容区域是 1200 像素。现在让我们说，我想要一个大的页眉或页脚，在顶部或底部。我没有办法做到这一点。主要原因是每个元素都指向.onepcssgrid、.onerow、.col(n) 的子/后代。或者我可以！

1. 更改 onepcssgrid.css 本身的样式。
2. 在我的主样式表中覆盖它们。
3. 创建一个<header> 元素，给它width: 100%，然后使用.onepcssgrid、.onerow、.col(n)。 <footer> 将是相同的或图片库。

哪种方式更好？为什么这些网格中没有任何 CSS 网格或类允许这样做，或者存在？在一些网格中，我见过.push 和.pull 类。他们用于这种情况吗？这是故意突破电网的好案例吗？这些只是我的选择吗？高手是怎么做到的？

我的目标布局。

Answer 1

我会说选项三在这种情况下是最好的。您应该始终尝试避免重构框架，尤其是当您与开发人员团队合作时。重要的是要理解 CSS 框架只是一组有用的类，它们的存在可以加快您的开发速度 - 它们不需要限制您可以创建的内容。查看框架的底层，看看他们如何进行查询和选择器，并尝试以您自己的风格对其进行扩展。

如果这有帮助或者您还有其他问题，请告诉我 :)

Answer 2

感谢您使用我的网格系统。

不幸的是，我制作它已经快 2 年了，而且很长时间没有更新，所以是的，它有点过时了。我不打算在未来维护或更新它，因为我开始为自己的目的使用一些修改和改进的版本。也许以后有空我会放出来。

如果缺少某些内容或您不喜欢我的网格的内容，请随时更新/更改它。由你决定。最好的办法可能是保持原始网格不变，并在您自己的 CSS 文件中扩展它。

也许如果您有更多需要更改的内容，您可以尝试检查其他网格/框架。我相信您会找到更适合您需求的。

干杯 马特