---
order: 5
title:
zh-CN: 响应式布局
en-US: Responsive
---
## zh-CN
Layout.Sider 支持响应式布局。
> 说明：配置 `breakpoint` 属性即生效，视窗宽度小于 `breakpoint` 时 Sider 缩小为 `collapsedWidth` 宽度，若将 `collapsedWidth` 设置为零，会出现特殊 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, Icon } from 'antd';
const {
Header, Content, Footer, Sider,
} = Layout;
ReactDOM.render(
< 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']} >
< Menu.Item key = "1" >
< Icon type = "user" / >
< span className = "nav-text" > nav 1< / span >
< / Menu.Item >
< Menu.Item key = "2" >
< Icon type = "video-camera" / >
< span className = "nav-text" > nav 2< / span >
< / Menu.Item >
< Menu.Item key = "3" >
< Icon type = "upload" / >
< span className = "nav-text" > nav 3< / span >
< / Menu.Item >
< Menu.Item key = "4" >
< Icon type = "user" / >
< span className = "nav-text" > nav 4< / span >
< / Menu.Item >
< / Menu >
< / Sider >
< Layout >
< Header style = {{ background: ' # fff ' , padding: 0 } } / >
< Content style = {{ margin: ' 24px 16px 0 ' } } >
< div style = {{ padding: 24 , background: ' # fff ' , minHeight: 360 } } >
content
< / div >
< / Content >
< Footer style = {{ textAlign: ' center ' } } >
Ant Design ©2018 Created by Ant UED
< / Footer >
< / Layout >
< / Layout > ,
mountNode
);
````
````css
#components-layout-demo-responsive .logo {
height: 32px;
background: rgba(255,255,255,.2);
margin: 16px;
}
````
