Zurb基金會4不靈

Question

隨着Zurb基礎版本3，如果我包括foundation.css文件 我能夠使電網等

版本4，如果我做的一切同樣的方式，不起作用。

我錯過了什麼？

Answer 1

如果我做的一切同樣的方式

有新類用於在V4網格。您不能只說four columns，而是指定列是針對大型還是小型視圖/設備。所以你需要有small-X或large-X其中X是div需要消耗的列數。下面是一個例子：

<div class="row"> 
    <div class="ten columns centered"> 
     <h1>This grid won't work on V4</h1> 

     <div class="row"> 
      <div class="four columns"> 
       <div class="panel"> 
        <p>Left panel</p> 
       </div> 
      </div> 
      <div class="four columns"> 
       <div class="panel"> 
        <p>Center panel</p> 
       </div> 
      </div> 
      <div class="four columns"> 
       <div class="panel"> 
        <p>Right panel</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<div class="row"> 
    <div class="ten columns centered"> 
     <h1>But this will...</h1> 
     <div class="row"> 
      <div class="small-2 large-4 columns"> 
       <div class="panel"> 
        <p>Left panel</p> 
       </div> 
      </div> 
      <div class="small-4 large-4 columns"> 
       <div class="panel"> 
        <p>Center panel</p> 
       </div> 
      </div> 
      <div class="small-6 large-4 columns"> 
       <div class="panel"> 
        <p>Right panel</p> 
       </div> 
      </div> 
     </div> 
    </div>   
</div> 

注意單個div上的小和大的組合。它告訴你的是，左側面板只能在小設備（手機）上顯示兩列，在大型設備上顯示四列（例如在桌面上）。同樣，右側面板將在小型設備上顯示六列，在大型設備上顯示四列。您可以通過使用瀏覽器的大小來查看差異。

要獲得有關V4 Grid如何工作的更多信息，請參閱go to this page。