css - 如何使ant Layout设计适合页面
问题描述
我在使用 React 和 antd 时遇到问题,我正在使用 antd 上布局页面中的组件。我认为有一个逗号会限制 UI 填写页面,尽管它可能与设计有关。我要解决的问题也是让 UI 填充页面,而不是限制高度并在其下方使用逗号。
在 App.js 中呈现的 React Layout:
<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>
如果有人有任何建议,我很困惑为什么会有逗号。
解决方案
尝试检查你的 css 文件,包括像 bootstrap 这样的框架,看看它们是否会影响你的设计
推荐阅读
- sql - 在查询计划中显示估计值与实际估计值
- unity3d - 我正在尝试使用 Time.deltaTime 统一制作一个计时器以重新加载。任何人都知道为什么这不起作用?
- python - 如何为 Django-Shop CartItems 使用十进制数量
- python - Mac - VSCode - 将 Python 文件转换为 PDF 错误
- laravel - Laravel 国家从下拉列表中选择不保存
- java - 启动服务器时出现错误 GlassFish 5.0.1:java.lang.NoClassDefFoundError: sun/security/util/CurveDB
- sql - PostgreSQL - 存储永不改变的数据
- python - 未腌制的张量流模型无法做出预测
- kotlin - Kotlin 连接检查可空键和可空条目
- html - 如何让盒子阴影出现在不同的元素下