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

【问题标题】：Bourbon - Neat - Alternating Left/Right - Right/Left Columns - Same DOM StructureBourbon - 整洁 - 交替左/右 - 右/左列 - 相同的 DOM 结构
【发布时间】：2014-10-29 02:11:52
【问题描述】：

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

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

其中有 48% 的列包含文本，然后是 48% 的列包含图像。然后，此布局在页面下方左右交替。关键是 DOM 结构是相同的。 CSS 用于控制 48% 列的位置和边距。

谁能解释一下如何使用整洁来实现这种交替布局？

【问题讨论】：

我无法评论如何使用整洁，但引用的站点使用偶数/奇数类来确定应该在哪一侧。快速浏览文档并没有显示任何具体内容，但我认为使用 Sass mixin 可以相对轻松地完成。
在询问如何使用 Bourbon/Neat 做到这一点之前，您有没有花时间考虑一下编译后的 CSS 需要什么样的外观才能创建这样的布局？（见：stackoverflow.com/questions/17298799/…）
感谢您的 cmets。我认为是的。在此处参考您的答案：stackoverflow.com/a/17299816/4007578您知道如何使用 Bourbon/Neat 来实现吗？

标签： sass bourbon neat alternating

【解决方案1】：

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

某行有一个容器，在你分享的url中，__标签有这个作用。
两列，您可以使用整洁的响应式主题。在示例中，col-1-2 类标签。

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

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

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

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

.row {
   @include outer-container;
}

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

最后，对图像的效果很简单，只需要一个负值的边距。在示例中是一个 -80px 的 margin-top：

问候。

【讨论】：

谢谢，太好了。阅读文档后，我知道如何使用跨度列。使用起来真的很好:) 我的问题更多是如何使用 Neats mixins 来实现交替布局，同时保持与此处引用的相同 DOM 结构：stackoverflow.com/questions/17298799/…