Question

我正在建立一个使用Foundation 5的响应式网站。一切都很顺利，但我遇到的一个问题是，设计师发给我的PSD很大程度上遵循12列网格，非常棒。然而，设计中有一些元素在网格外扩展到最左边或最右边。同样在一些“行”上将有两个并排放置的元件，但每个元件每个占用7个网格空间。

虽然它在Photoshop中看起来很棒，但使用响应式网格进行编码却证明是具有挑战性的。有没有人有任何想法如何解决这个问题？

Answer 1

我使用两种不同的方法来处理这种类型的布局：

使用负边距向左/向右拉

例如，如果你的元素从网格的左边缘拉出25px，你会使用：

.element{
    margin-left: -25px
}

只要您使用流体网格，其中的元素就会流动以填充空间。

这是最简单的方法，并且在Bootstrap实施中非常常用，所以我不预见基金会会有很大的不同（对于完全披露：我没有使用过基金会）。如果你使用测量值向外拉，虽然你需要确保这些值通过不同的视口/媒体查询来解决。

扩展网格。

如果你提到你在页面上有2x7网格，这可能是最相关的。如果设计中的某些内容明显落在您正在使用的网格之外，则使用新的类名称并使用它来修改网格在页面中该特定点的行为方式。

请记住，无论您打算使用哪种框架，它都只是作为一个起点：您应该感到舒适和自信地修改和构建它以满足您的需求（以及您的设计师的需求）！）。