Zurb基金会 - 在较小的屏幕上移除网格填充物？

Question

我试图去除填充左，右小屏幕上下方的网格项目：

<!-- row block --> 
<div class="row row-cards"> 

    <!-- grid container --> 
    <div class="grid-container"> 

     <!-- grid x --> 
     <div class="grid-x grid-padding-x"> 

      <!-- item --> 
      <div class="cell medium-6"> 
       xxx 
      </div> 
      <!-- item --> 

      <!-- item --> 
      <div class="cell medium-6"> 
       xxx 
      </div> 
      <!-- item --> 

     </div> 

    </div> 

</div> 
<!-- row block --> 

CSS：

/* Small only */ 
@media screen and (max-width: 39.9375em) { 
    .row-cards { 
     .grid-container { 
      padding: 0; 
     } 

     .grid-padding-x { 
      padding: 0; 

      .cell { 
       padding: 0 !important; 
      } 
     } 
    } 
} 

但覆盖不工作。这就是我得到：

这是我想获得：

任何想法？

Answer 1

您是否尝试过在网格上-X包装类.small-margin-collapse，像这样：

<div class="grid-x grid-padding-x small-margin-collapse">

https://foundation.zurb.com/sites/docs/xy-grid.html#collapse-cells

Answer 2

我劈（LESS）：

/* Small only */ 
@media screen and (max-width: 39.9375em) { 
    .row { 
     background-color: #ffffff; 

     .grid-container { 
      padding-right: 10px; // a temporary hack 
      padding-left: 10px; // a temporary hack 
      max-width: 100%; 
      margin: 0 auto; 
     } 

     .grid-padding-x { 
      .cell { 
       padding-right: 0; 
       padding-left: 0; 
      } 
     } 

    } 
}