Zurb基金會3五列

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> 

希望它有助於某人或未來我。