Zurb Foundation - 删除较小屏幕上的网格填充？

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

你试过在你的 grid-x wrap 上 class .small-padding-collapse 吗，像这样：

<div class="grid-x grid-padding-x small-padding-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;
            }
        }

    }
}