基础:使用不同总列数嵌套网格

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基础:使用不同总列数嵌套网格相关的知识,希望对你有一定的参考价值。

我正在使用一个基本的12 col网格,它工作得很好。这是我的_settings.scss

$grid-row-width: $global-width;
$grid-column-count: 12;
$grid-column-gutter: (
        small: 20px,
        medium: 30px,
);
$grid-column-align-edge: true;
$grid-column-alias: 'columns';
$block-grid-max: 8;

这是我的标记:

<div class="grid-container wrapper">
    <div class="grid-x grid-margin-x">
        <div class="cell medium-12"></div>
    </div>
</div>

现在提到我对12 cols很满意,我想保持这样。现在对于一个特定的元素,我需要使用一个嵌套的24 col网格,它最终会以smth结尾。像下面的标记:

<div class="grid-container wrapper">
    <div class="grid-x grid-margin-x">
        <div class="cell medium-12">
            <div class="grid-container wrapper">
                <div class="grid-x grid-margin-x">
                    <div class="cell medium-24"></div>
                </div>
            </div>
        </div>
    </div>
</div>

有没有办法实现这个目标?

答案

它似乎不像简单地使用类名就可以解决。但是您可以使用col手动定义xy-cell-size()宽度

这是我更新的scss

.custom-medium-24 {
    width: xy-cell-size(24 of 24);

    @include breakpoint(small only) {
        width: 100%;
    }
}

.custom-medium-14 {
    width: xy-cell-size(14 of 24);

    @include breakpoint(small only) {
        width: 100%;
    }
}

感谢评论中的提示!

以上是关于基础:使用不同总列数嵌套网格的主要内容,如果未能解决你的问题,请参考以下文章

BigQuery - 获取 BigQuery 表中的总列数

MFC-CListCtrl-获得总列数

如何计算表的总列数(我在 Oracle 10g 中)[重复]

C二维字符数组的使用及如何获取二维数组的总行数和总列数!

如何得到listview的总列数与总行数

代码翻译