foundation5/css - disable/reset a css property

Question

Я работаю с основанием и пытаюсь преобразовать изображение в рабочий HTML. Извините, но я использую основание в первый раз. Но мой вопрос и не очень сильно связан только с этим. Вот что. В основе, когда вы используете «блок-сетки», фонд применяет некоторые прокладки к элементам li. Не смотрите на следующее изображение.

Я сделал это, назначить класс «последнего» этих трех элементов Li и использовали

padding-bottom:0px; 

для этого класса, чтобы получить желаемые результаты.

Теперь, когда я вхожу в мобильный вид, я получаю следующий результат из-за вышеуказанного класса.

Теперь, я знаю, что обходные пути, которые я могу использовать медиа-запрос и назначить некоторое дополнение к классу «последний» или я могу использовать JQuery, чтобы удалить этот класс от небольших устройств. Но в этом случае фундамент не будет применяться автоматически. Но если я отключу это свойство, тогда фонд позаботится о дополнении. Это возможно? Только с CSS?

Answer 1

В таких ситуациях, когда вы намекаете, медиа-запросы - это инструмент, который вы ищете - это технически только CSS.

Фонд является основой и имеет стиль по умолчанию, но они не могут создавать свои стили для каждого/каждого проекта из коробки, как вы нашли в своем случае.

Как заядлый пользователь фонда, есть много примеров, например, выше, где вам нужно написать немного пользовательского CSS.

Я бы реализовать одно из следующих действий:

1. использовать только обивка-топ для элементов сетки блоков, я думаю, устраняя проблему здесь.

   $block-grid-elements: 12; 
   $block-grid-default-spacing: 0; // set this to 0, and then manually reset it to just be left-right-bottom padding. 
   $align-block-grid-to-grid: true; 
   
   
   // Somewhere in your foundation overrides css file. 
   ul.block-grid { 
       padding: 20px 20px 0 20px; 
   } 
   

2. В противном случае, сохранить отступы по умолчанию и написать код медиа-запросов:

   <ul> 
   <li></li> 
   <li></li> 
   <li class="last-large"></li> 
   <li class="last-large last-small"></li> 
   <li class="last-large last-small"></li> 
   </ul> 
   
   
   @media #{$small-only} { 
       .last-small { 
        padding-bottom: 0;  
       } 
   } 
   
   @media #{$medium-up} { 
       .last-large { 
        padding-bottom: 0;  
       } 
   }