波本威士忌 - 整洁 - 交替的左/右 - 右/左列 - 相同的DOM结构

Question

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

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

如果有48％的列有文字，后面有48％的列有图像。然后，此布局在页面左右交替显示。关键的是，DOM结构是一样的。 CSS用于操纵48％列和边距排水的位置。

有人可以解释如何使用整洁来实现这种交替布局吗？

Answer 1

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

• 某个行有一个容器，在您分享的网址中，___标记具有此角色。
• 您可以使用整洁的主题响应两列。在示例中， col-1-2 类标记。

Neat为此提供了两个mixin。 外部容器和 span-columns ：

例如，您可以通过以下代码模拟此内容：

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

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

.row {
   @include outer-container;
}

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

最后，对图像的影响很容易，只需要一个负值的余量。在这个例子中是-80px的margin-top：

问候。