Css ZURB基金会-删除小屏幕上的网格填充？

我正在尝试删除较小屏幕上的左右填充，用于以下网格项目：

<!-- 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 -->

但覆盖不起作用。这就是我得到的：

这就是我想要得到的：

有什么想法吗？

你试过这门课了吗。小填充物折叠在你的grid-x包装上，如下所示：

我的黑客少：

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

    }
}

除了您的行卡之外，是否还应用了行基础类？如果是，当“.row”未与.column类一起使用时，左右两侧都有一个负边距。是否在项目中同时导入传统栅格和grid-x栅格？也许你应该只使用一个网格系统。

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

    }
}