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

    }
}