Question

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

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

Answer 1

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

如果您的行没有最多可添加12列的计数，则可以使用class="end"标记最后一列以覆盖它行为。 [source]

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

或者，如果您需要使用所有空格，可以使用block grid：

块网格来自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

这应该适用于基金会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>

希望它可以帮助某人或未来的我。

Zurb基金会3五列

2 个答案: