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. Это говорит о том, что на левой панели будут только два столбца на небольших устройствах (мобильные телефоны) и четыре столбца на больших устройствах, например на рабочем столе. Аналогично, панель Right будет состоять из шести столбцов на небольших устройствах и четырех столбцах на больших устройствах. Вы можете видеть разницу, играя с размером вашего браузера.

Чтобы узнать больше о том, как работает сетка V4, go to this page.