zurb-foundation - Zurb Foundation 3 五柱

Question

我正在测试基础 3 框架，想知道如何设置一行五篇文章。

有没有人有解决这个问题的想法？

Answer 1

一种解决方案是使用两列并将最后一列标记为结尾。

如果您的行没有最多 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样式#-up组成。您可以控制 Scss 设置文件或定制器中有多少。这些对于应用程序生成的阻塞内容来说是理想的，因为它们不需要行甚至元素数来正确显示。

<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>

Answer 2

这应该适用于 Foundation 5（也许 3）。诀窍是偏移第一列并结束最后一列。

<nav>
    <div class="row">
        <div class="column small-2 small-offset-1">
            <a>Link</a>
        </div>
        <div class="column small-2">
            <a>Link</a>
        </div>
        <div class="column small-2">
            <a>Link</a>
        </div>
        <div class="column small-2">
            <a>Link</a>
        </div>
        <div class="column small-2 end">
            <a>Link</a>
        </div>
    </div>
</nav>

希望它对某人或未来的我有所帮助。