在 MDL 中更改抽屉的宽度

【问题标题】：Change width of drawer in MDL在 MDL 中更改抽屉的宽度
【发布时间】：2015-11-07 15:27:12
【问题描述】：

我刚刚开始使用 Material Design Lite。我想改变抽屉的宽度。

我尝试过的是这样的：

.mdl-layout__drawer {
  width: 25%;
}

这会导致抽屉与内容区域重叠。

我该如何解决这个问题？

【问题讨论】：

【解决方案1】：

抽屉是一个绝对组件，它位于其父容器中定义的左侧位置。当你改变它的宽度时，你也需要改变它的位置。

这是宽度为 500px 的唯一 css 解决方案 -

.mdl-layout__drawer {
  width: 500px;
  left: -250px;
}

.mdl-layout__drawer.is-visible {
  left: 0;
}

【讨论】：