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-spanFlout 出力スタイルのスパンです。これは、あなたが持っているもののように、対称グリッド上で互いに突き合わされた複数のアイテムに適しています。

Bootstrap には現在、流動的なガターではなく、固定されたガターがあるため、Singularity のガターを 0 に設定するか、固定幅のガターの固定数に設定する必要があります (padding内側に追加して行います)。パディングを追加する場合は、必ずアイテムのボックス モデルを に変更してくださいborder-box。

1 つの違いがあり、どちらの方法でも考慮する必要がありますが、各行の最初のアイテムは、すべてがフロートされている方向をクリアする必要があるということです (この場合、clear: left. これは で行うことができます)。 nth-of-type(odd)、ただし、タイプはクラスではなくタグであり、探している結果が正確に生成されない可能性があることに注意してください (ユースケースの約 90% である必要があります)。コンテンツはぎこちない行になります。

これらすべてのデモについては、このSassMeister の例を参照してください。

于 2014-04-19T08:09:54.100 に答える