Question

我正在尝试创建一个每月每天有一列的网格。所以我需要一行最多32列（第一个标签+一月中的几天）

我使用来动态添加div。

<section>
    <div class="mdc-layout-grid">
        <div class="mdc-layout-grid__inner">
            @{
                <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-1">
                    Days:
                </div>
                for (var i = 1; i <= Model.TotalDays; i++)
                {
                    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-1">@Model.GetDateStringFromDay(i)</div>
                }
            }
        </div>
    </div>
</section>

这给了我每行12个值，因为MDC是基于12列的。我尝试创建嵌套的div，但最终为每个新级别添加了新行。

有办法吗？使用嵌套列或以某种方式覆盖默认的MDC行为以允许单行中有更多列？

Answer 1

如果您正在使用Sass，则可以使用Sass变量覆盖布局网格上的列数：

$mdc-layout-grid-columns: (
  desktop: 12,
  tablet: 8,
  phone: 4
);

但这将适用于标记中的所有MDC-Web布局网格。

Answer 2

尝试使用嵌套网格。 https://github.com/material-components/material-components-web/tree/master/packages/mdc-layout-grid#nested-grid

在布局网格中创建4个等分的单元格。为此使用cell-3。 3 X 4 = 12

在每个单元格中，创建一个嵌套的mdc-layout-grid__inner，每个单元格包含8个单元格。最终结果是8 x 4 = 32个单元格。

材料设计布局网格超过12列

2 个答案: