2017-03-05 21:10:34 +08:00
## zh-CN
Layout.Sider 支持响应式布局。
2020-08-14 10:58:58 +08:00
> 说明：配置 `breakpoint` 属性即生效，视窗宽度小于 `breakpoint` 时 Sider 缩小为 `collapsedWidth` 宽度，若将 `collapsedWidth` 设置为 0，
2017-03-05 21:10:34 +08:00
## en-US
Layout.Sider supports responsive layout.
2020-08-14 10:58:58 +08:00
> Note: You can get a responsive layout by setting `breakpoint`, the Sider will collapse to the width of `collapsedWidth` when window width is below the `breakpoint`. And a special trigger will appear if the `collapsedWidth` is set to 0.
2017-03-05 21:10:34 +08:00
2019-05-07 14:57:32 +08:00
```css
2017-03-05 21:10:34 +08:00
#components-layout-demo-responsive .logo {
height: 32px;
margin: 16px;
2021-01-30 19:39:02 +08:00
background: rgba(255, 255, 255, 0.2);
2017-03-05 21:10:34 +08:00
}
2019-12-26 12:21:08 +08:00
2022-04-22 15:00:18 +08:00
#components-layout-demo-responsive .site-layout-sub-header-background {
2019-12-26 12:21:08 +08:00
background: #fff ;
}
2022-04-22 15:00:18 +08:00
#components-layout-demo-responsive .site-layout-background {
2019-12-26 12:21:08 +08:00
background: #fff ;
}
2019-05-07 14:57:32 +08:00
```
2020-01-02 17:54:11 +08:00
< style >
[data-theme="dark"] .site-layout-sub-header-background {
background: #141414 ;
}
< / style >
