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

Question

我正在与基金会合作并尝试将图像转换为可用的 HTML。抱歉，我是第一次使用粉底。但我的问题是并且与 only 没有太大关系。事情是这样的。在 foundation 中，当您使用“block-grids”时，foundation 会对 li 元素应用一些填充。看看没有下面的图片。

我通过为这三个 li 元素分配一个类“last”来完成此操作并使用了

padding-bottom:0px;

为了这门课能得到想要的结果。

现在，当我进入移动 View 时，由于上述类，我得到以下结果。

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

Answer 1

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

Foundation 是一个框架，并具有其默认样式，但他们无法像您在案例中发现的那样，让他们的样式开箱即用地适用于每个人/每个元素。

作为基础的狂热用户，有很多示例，如上面的示例，您必须在其中编写一些自定义 CSS。

我会执行以下任一操作:

1. 仅对 block 状网格元素使用 padding-top，我想在这里消除您的问题。

   $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;    
       }
   }