如何处理重复的网格模式奇异性gs

Question

我正在构建一个博客主页，在5行2列中显示10篇博客文章。每列占用50%的宽度并向左浮动。如果我使用bootstrap的网格，我将为每篇博客文章使用.col-md-6。

如何使用奇点实现这一点

@include add-grid(1 1); // Defines a grid of 2 columns
article {
  @include grid-span(1,1);
}

在这里，我告诉它把文章放在第一栏。如何创建一个独立于位置的网格类？

我只是像下面这样做我自己的CSS吗

article {
  width: 50%;
  float: left;
}

我想为所有的博客文章使用一个类来实现这种行为。

Answer 1

Bootstrap使用Singularity所称的Float输出样式。使用Singularity 1.2+，您可以使用@include sgs-change('output', 'float');更改输出方法。除了grid-span之外，Singularity附带的输出样式还提供了特定于输出的跨度混合，因为每个输出样式都有一个稍微不同的心理模型，这些模型可以满足这些需求。float-span是Flout输出样式的跨度，它非常适合在对称网格上相互碰撞的多个项目，就像你所拥有的一样。

Bootstrap目前有固定的排水沟，而不是流体排水沟，因此您需要将Singularity的排水沟设置为0或固定宽度排水沟的固定数量（通过在内部添加padding来完成）。如果添加填充，请确保将项目的框模型更改为border-box。

您需要考虑的一个区别是，每行中的第一个项目都需要清除所有浮动的方向（在本例中为clear: left）。这可以用nth-of-type(odd)来完成，但请记住，类型是标记，而不是类，可能不会产生您想要的结果（应该占用例的90%左右）。如果你不这样做，不同大小的内容可能会导致尴尬的行。

有关所有这些的演示，请参见SassMeister示例。