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

时间:2017-10-05 17:09:28

标签: css grid zurb-foundation zurb-foundation-6

我正在尝试在较小的屏幕上为下面的网格项目删除左右填充:

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

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

enter image description here

这就是我想要的:

enter image description here

有什么想法吗?

2 个答案:

答案 0 :(得分:1)

您是否尝试过grid-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

答案 1 :(得分:0)

我的黑客(少):

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

    }
}