foundation5 / css - 禁用/重置css属性

Question

我正在与基金会合作并尝试将图片转换为可用的HTML。对不起，我第一次使用粉底。但我的问题是并且与此无关。 这就是事情。在基础中，当您使用“块网格”时，基础将一些填充应用于li元素。看一下没有下面的图片。

我通过为这三个li元素分配一个“last”类并使用

来完成此操作

padding-bottom:0px;

让这个班级得到理想的结果。

现在，当我进入移动视图时，由于上面的类，我得到以下结果。

现在，我知道我可以使用媒体查询并为“last”类分配一些填充的解决方法，或者我可以使用jQuery从小型设备中删除该类。但是这样，基础将不会自动应用填充。但是如果我禁用这个属性，那么基金会将负责填充。那可能吗？仅限CSS？

Answer 1

对于这样的情况，正如您所暗示的，媒体查询是您正在寻找的工具 - 从技术上讲，它只是CSS。

Foundation是一个框架，并且具有默认样式，但是他们无法使你的样式适用于开箱即用的每个人/每个项目，正如你在案例中找到的那样。

作为粉丝的狂热用户，有很多例子，比如上面的例子，你必须编写一些自定义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;    
       }
   }