---
order: 5
title:
zh-CN: 响应式布局
en-US: Responsive
---
## zh-CN
Layout.Sider 支持响应式布局。
> 说明：配置 `breakpoint` 属性即生效，视窗宽度小于 `breakpoint` 时 Sider 缩小为 `collapsedWidth` 宽度，若将 `collapsedWidth` 设置为 0，会出现特殊 trigger。
## en-US
Layout.Sider supports responsive layout.
> 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.
```jsx
import { Layout, Menu } from 'antd';
import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons';
const { Header, Content, Footer, Sider } = Layout;
export default () => (
< Layout >
< Sider
breakpoint="lg"
collapsedWidth="0"
onBreakpoint={broken => {
console.log(broken);
}}
onCollapse={(collapsed, type) => {
console.log(collapsed, type);
}}
>
< div className = "logo" / >
< Menu
theme="dark"
mode="inline"
defaultSelectedKeys={['4']}
items={[UserOutlined, VideoCameraOutlined, UploadOutlined, UserOutlined].map(
(icon, index) => ({
key: String(index + 1),
icon: React.createElement(icon),
label: `nav ${index + 1}` ,
}),
)}
/>
< / Sider >
< Layout >
< Header className = "site-layout-sub-header-background" style = {{ padding: 0 } } / >
< Content style = {{ margin: ' 24px 16px 0 ' } } >
< div className = "site-layout-background" style = {{ padding: 24 , minHeight: 360 } } >
content
< / div >
< / Content >
< Footer style = {{ textAlign: ' center ' } } > Ant Design ©2018 Created by Ant UED< / Footer >
< / Layout >
< / Layout >
);
```
```css
#components-layout-demo-responsive .logo {
height: 32px;
margin: 16px;
background: rgba(255, 255, 255, 0.2);
}
#components-layout-demo-responsive .site-layout-sub-header-background {
background: #fff ;
}
#components-layout-demo-responsive .site-layout-background {
background: #fff ;
}
```
< style >
[data-theme="dark"] .site-layout-sub-header-background {
background: #141414 ;
}
< / style >
