【问题标题】:Zurb Foundation - Remove grid padding on smaller screens?Zurb Foundation - 删除较小屏幕上的网格填充?
【发布时间】:2017-10-05 17:09:28
【问题描述】:

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

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

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

这就是我想要得到的:

有什么想法吗?

【问题讨论】:

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


    【解决方案1】:

    您是否尝试过 grid-x 包装上的 .small-padding-collapse 类,如下所示:

    &lt;div class="grid-x grid-padding-x small-padding-collapse"&gt;

    https://foundation.zurb.com/sites/docs/xy-grid.html#collapse-cells

    【讨论】:

    • 除了您的.row-card 之外,是否还应用了.row 基础原生类?如果是这样,当'.row' 没有与.column 类一起使用时,左右两边都有一个负边距。您是否在项目中同时导入 legacy 和 grid-x 网格?也许你应该坚持一个网格系统。
    【解决方案2】:

    我的 hack (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;
                }
            }
    
        }
    }
    

    【讨论】:

      猜你喜欢
      • 2012-10-08
      • 1970-01-01
      • 2013-04-30
      • 2013-12-19
      • 1970-01-01
      • 2022-01-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多