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

    } 
}