如何使ant Layout设计适合页面

Question

我在使用 React 和 antd 时遇到问题，我正在使用 antd 上布局页面中的组件。我认为有一个逗号会限制 UI 填写页面，尽管它可能与设计有关。我要解决的问题也是让 UI 填充页面，而不是限制高度并在其下方使用逗号。

UI screenshot

React Layout 在 App.js 中呈现：

<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={<UserOutlined/>}>
                        nav 1
                    </Menu.Item>
                    <Menu.Item key="2" icon={<VideoCameraOutlined/>}>
                        nav 2
                    </Menu.Item>
                    <Menu.Item key="3" icon={<UploadOutlined/>}>
                        nav 3
                    </Menu.Item>
                    <Menu.Item key="4" icon={<UserOutlined/>}>
                        nav 4
                    </Menu.Item>
                </Menu>
            </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>

如果有人有任何建议，我很困惑为什么会有逗号。

Answer 1

尝试检查你的 css 文件，包括像 bootstrap 这样的框架，看看它们是否会影响你的设计