1

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

我正在使用for来动态添加 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 行为以允许单行中有更多列？

4

2 回答 2

0

尝试为此使用嵌套网格。 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，其中每个单元格 1 有 8 个单元格。最终结果将是 8 x 4 = 32 个单元格。

于 2018-05-26T08:21:02.357 回答
0

如果您使用的是 Sass，则可以使用 Sass 变量覆盖 Layout Grid 上的列数：

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

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

于 2018-02-13T07:03:45.080 回答