如何處理重複的網格模式奇點gs

我正在構建一個博客主頁，顯示5行和2列中的10篇博客文章。每列的寬度爲50％，左側浮動。如果我使用引導程序的網格，我會爲每篇博客文章使用.col-md-6。如何處理重複的網格模式奇點gs

如何做到這一點使用singularitygs

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

在這裏，我告訴它定位在第一列的文章。我如何創建一個獨立於我跨越它的位置的網格類？

我只是做我自己的CSS如下？

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

我想用一個類的所有博客文章來實現這一行爲。

來源

2014-04-19 Vinay Raghu

Bootstrap使用Singularity所謂的Float output style。使用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的示例

來源

2014-04-19 08:09:54 Snugug

如何處理重複的網格模式奇點gs

回答

相關問題