波旁威士忌整洁的网格推送未按预期工作



我有一个非常简单的问题,似乎很难解决。我想坚持使用正常的标准 12 列整洁网格,但我希望两个 .homeSplitdiv 各占 5 列。我希望第二个(.insights)在中间获得 1col 的空间,所以我给了它一个网格推送(1)。当它达到移动尺寸时,我希望这些div 中的每一个都占据完整的 12 列并堆叠在一起。问题是,一旦我缩小到移动尺寸,我用 grid-push(1) 分配的 1col 空间仍然存在,我不知道如何摆脱它。

CSS/SASS:

.homeSplit {
    position: relative;
    @include grid-column(5);
&.news {
    .post {
        margin-bottom: 26px;
    }
}
&.insights {
    @include grid-push(1);
    padding-left: 30px;
    z-index: 999;
    .post {
        margin-bottom: 26px;
    }
}
}
    @media only screen and (max-width: 959px) {
    .homeSplit {
        @include grid-column(12);
        &.insights {
            @include grid-push(0);
        }
    }
}

我也尝试过网格推送(-1),但它走得太远了。我误解了如何使用 Neat 吗?把我的头发拉到这边。

这里最好的途径是使用 grid-media() mixin 来拥有一系列网格。下面是一个示例(删除了一些无关的代码)。

此外,默认情况下,整洁在媒体查询中优先于min-width而不是max-width。 根据您的布局,min-width使事情变得容易得多。

$my-desktop-grid: (
  media: 959px,
);
.homeSplit {
    @include grid-column(); // default's to 12 here
    @include grid-media($my-desktop-grid) {
        @include grid-column(5);
        &.insights {
            @include grid-push(1);
        }
    }
}

我创建了一个代码笔作为示例,以便您可以看到它的实际效果。

https://codepen.io/whmii/pen/aVvqma

选项 1:嵌套错误。

在查看上面的示例中,@media声明嵌套在.homeSplit块中,但随后.homeSplit再次声明 w/in @media .但是,您上面的代码可能无法运行并且会出错,因此我假设在翻译中丢失了一些东西,然后将其剪切并粘贴到您的问题中。

选项 2:网格推送想要false或只是空的。

grid-push(0)并不是真的,但在 sass 中0可能会== false,因此您可以尝试以下方法:

.homeSplit {
    position: relative;
    @include grid-column(5);
    &.news {
        .post {
            margin-bottom: 26px;
        }
    }
    &.insights {
        @include grid-push(1);
        padding-left: 30px;
        z-index: 999;
        .post {
            margin-bottom: 26px;
        }
    }
    @media only screen and (max-width: 959px) {
        @include grid-column(12);
        &.insights {
            @include grid-push(); // 'false' is the default here
        }
    }
}

注意:我还清理了一些底部的嵌套

我将添加第二个答案,说明如何使用grid-media mixin来做到这一点。

相关内容

  • 没有找到相关文章

最新更新