0

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

我如何使用singularitygs 实现这一目标 

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

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

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

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

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

4

1 回答 1

1

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

Bootstrap 目前有固定的排水沟，而不是流动的排水沟，因此您需要将 Singularity 的排水沟设置为 0 或固定宽度的排水沟（通过添加padding内部完成）。如果添加填充，请务必将项目的盒子模型更改为border-box.

您将有一个不同之处，并且需要考虑您进行的任何一种方式，即每行中的第一项将需要清除所有内容的浮动方向（在这种情况下，clear: left. 这可以通过nth-of-type(odd)，但请记住，类型是标签，而不是类，并且可能不会产生您正在寻找的结果（应该适用于大约 90% 的用例）。如果您不这样做，则可能会出现不同大小的内容会造成尴尬的行。

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

于 2014-04-19T08:09:54.100 回答