Bourbon-整洁-左/右-右/左交替列-相同的DOM结构

Question

我最近开始研究Bourbon和Neat，以便在我的个人网站上使用，并可能用于未来的项目。

我正在尝试重新创建一个从左到右、从右到左的交替布局。与此类似：http://www.plunkettassociates.co.uk/services/

其中有一个48%的列包含文本，然后是48%的列和图像。然后，此布局在页面上左右交替。至关重要的是，DOM结构是相同的。CSS用于操作48%列的位置和边距删除。

有人能解释一下如何使用neat实现这种交替布局吗？

Answer 1

如果您想使用Bourbon/Neart来模拟这种布局。你必须知道一些事情：

• 某行有一个容器，在您共享的url中，__标记具有此角色
• 两列，您可以使用neat对其进行主题化响应。在示例中，col-1-2类标记

Neat为此提供了两种混合物外部容器和跨度列：

例如，您可以通过以下代码来模拟：

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
</div>

Sass代码，使用Neat。假设您的页面中有12列：

.row {
   @include outer-container;
}
.column {
   @include span-columns(6);
}

最后，对图像的效果很容易，只需要一个负值的边距。在这个例子中是一个-80像素的页边空白顶部：

谨致问候。