Angular Material Design Sidenav：Flex 更改垂直位置而不是水平位置

Question

默认Material 设计给出的 sidenav 宽度为 304px。我试图通过在 md-sidenav 元素内添加 flex="66" 属性来实现 material 设计对弹性框的使用。当我这样做时，它垂直缩短了 sidenav，而不是水平。

似乎我无法在没有纯 CSS 的情况下覆盖 304px，虽然我可以做到，但我特别希望远离它。

我没有在 Material 设计文档中看到这个概念。还有其他人有这个问题吗？

Answer 1

如果你会看angular-material.css如下

md-sidenav 显示为

  display : none

关闭时显示为

display : flex

当它可见时。

如果你想改变它的宽度，你需要在 custom.css 的下面写几行，你应该在加载后加载 angular-material.css

width : 500px !important;
min-width : 500px !important;
max-width : 500px !important;

将 500 替换为您的自定义值。

Angular Material Design Sidenav: Flex changes the vertical position instead of horizontal position