zurb-foundation - Zurb Foundation 3 ファイブ カラム

Question

Foundation 3 フレームワークをテストしていますが、5 つの記事で行を設定する方法を知りたいと思っていました。

誰かがそれを修正する考えを持っていますか?

Answer 1

1 つの解決策は、2 つの列を使用し、最後の列を最後としてマークすることです。

行に最大 12 列を追加するカウントがない場合、class="end"その動作をオーバーライドするために最後の列にタグを付けることができます。[ソース]

<div class="row">
  <div class="two columns">
    article 1
  </div>
  <div class="two columns">
    article 2
  </div>
  <div class="two columns">
    article 3
  </div>
  <div class="two columns">
    article 4
  </div>
  <div class="two columns end">
    article 5
  </div>
</div>

または、すべてのスペースを使用する必要がある場合は、ブロック グリッドを使用できます。

ブロック グリッドは、チェーンされたスタイルul.block-gridを持つから作成されます。#-upScss 設定ファイルまたはカスタマイザーでいくつ持つかを制御します。これらは、正しく表示するために行や要素の数さえも必要としないため、アプリケーションによって生成されたブロックイン コンテンツに最適です。

<ul class="block-grid five-up">
  <li>article 1</li>
  <li>article 2</li>
  <li>article 3</li>
  <li>article 4</li>
  <li>article 5</li>
</ul>