CSS 如何在 Angular Material Design 中更改 Sidenav 的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27620354/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change width of a Sidenav in Angular Material Design?
提问by pierrebo
No matter what screen size I use, the Sidenav is always the same size. I tried adding attributes such as - flex - flex="85" (to get 85% of its container)
无论我使用什么屏幕尺寸，Sidenav 始终是相同的尺寸。我尝试添加诸如 - flex - flex="85" 之类的属性（以获得其容器的 85%）
Can't seem to find a good approach.
似乎找不到好的方法。
回答by user3587412
In angular material, md-sidenav has these attributes:
在角材料中， md-sidenav 具有以下属性：
width: 304px;
min-width: 304px;
That's why the width will be fixed at 304 px no matter what device you use. So if you want to change your sidenav width you'll have to change the css a bit.
这就是为什么无论您使用什么设备，宽度都会固定为 304 像素。因此，如果您想更改 sidenav 宽度，则必须稍微更改 css。
If you're fine with supporting only modern browsers, you can change it to a vw measure (1/100th of the viewport width) and add it to a separate css file. The code will look something like this:
如果您可以仅支持现代浏览器，则可以将其更改为 vw 度量（视口宽度的 1/100）并将其添加到单独的 css 文件中。代码如下所示：
md-sidenav,
md-sidenav.md-locked-open,
md-sidenav.md-closed.md-locked-open-add-active {
min-width: 200px !important;
width: 85vw !important;
max-width: 400px !important;
}
Here's a plunker: http://plnkr.co/edit/cXfJzxsAFXA3Lh4TiWUk?p=preview
这是一个plunker：http://plnkr.co/edit/cXfJzxsAFXA3Lh4TiWUk?p=preview
回答by Trevor Glass
The answer submitted by user3587412 allowed me to change the width but I was having the same problem as Craig Shearer with it killing the animation. So I tried a few different things and came up with this.
user3587412 提交的答案允许我更改宽度，但我遇到了与 Craig Shearer 相同的问题，因为它会杀死动画。所以我尝试了一些不同的东西并想出了这个。
md-sidenav.md-locked-open {
width: 250px;
min-width: 250px;
max-width: 250px;
}
I'm not sure if that is the proper way but it seemed to work for me.
我不确定这是否是正确的方法，但它似乎对我有用。
回答by Vector
Thanks to user3587412 I could find easily the required styles. To get the md-sidenav to adjust to a flex parent just override
感谢 user3587412，我可以轻松找到所需的样式。要让 md-sidenav 调整到 flex 父级，只需覆盖
md-sidenav,
md-sidenav.md-locked-open,
md-sidenav.md-closed.md-locked-open-add-active {
min-width: 0px !important;
width: auto !important;
max-width: none !important;
}
回答by Maxence
After trying different CSS in this thread I end up with :
在此线程中尝试不同的 CSS 后，我最终得到：
md-sidenav,
md-sidenav.md-locked-open-add-active,
md-sidenav.md-closed.md-locked-open-add-active,
md-sidenav.md-locked-open {
width: 200px;
min-width: 200px;
max-width: 200px;
}
I'm currently on angular-material 1.0.8and tested with Chrome 50only.
我目前正在使用角材料1.0.8并50仅使用 Chrome 进行测试。
With this CSS what works for me :
使用这个 CSS 什么对我有用：
- Animation close and open OK
- When locked OK
- When not locked OK
- 动画关闭和打开 OK
- 锁定时 OK
- 未锁定时 OK
回答by Tom Harrison
I came across this issue, as well -- even though the 304pxwidth is plenty, I had a card in the content area to the right that was squeezing the sidenav. So, using the flex grid I was able to add <md-sidenav flex="15" class="md-sidenav-left ...to get the width I wanted without overriding CSS. It sounds like this didn't work for you, so maybe it has to do with the layout options in your design...
我也遇到了这个问题——尽管304px宽度很大，但我在右侧的内容区域中有一张卡片，它挤压了侧边导航。因此，使用 flex 网格我可以添加<md-sidenav flex="15" class="md-sidenav-left ...以获得我想要的宽度而无需覆盖 CSS。听起来这对您不起作用，所以可能与您设计中的布局选项有关...
