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。