我看过Antd的layout design documents和 Grid
上的文档和 Layout
.我不明白的是如何在Antd中完成如下设计:
我希望我的应用有一个居中的列。
在宽屏幕(横向客户端)上,中心栏应该相当窄。就网格而言,可能是 8 个单元。
在窄屏(纵向客户端)上,中心栏应该使用相对较大的 宽度。在非常窄/小的屏幕尺寸的情况下,网格最多 24 个单元。
基本上这听起来像是我在寻找具有最大宽度的旧容器。我显然可以想出一些自定义 CSS 来设置自定义 <div>
的样式。 ,但这让我想知道:
- 我是不是遗漏了什么,或者真的没有办法用 Antd 的布局系统来实现它?
- 如果是这样,我是否在现代 UI 设计理念方面做错了什么?
最佳答案
我们已经做到了。不完全是通过 Ant Design,但在其中使用了很多 Ant Design。
我不确定其他解决方案是什么,但我们就是这样做的。您所说的容器是我们网站的父容器,其他所有内容都在其中呈现。
我们在主容器内创建了一个路由(作为底部标签,这对我们来说很方便)并将其最大宽度设置为 420px。由于所有内容都包含在底部选项卡中,因此我们的应用程序在横向客户端上居中,并在纵向模式下填充宽度。
为清晰起见的代码。 (它是一个 React 应用程序)
应用容器 CSS:
.App {
text-align: center;
height: 100vh !important;
}
父容器 CSS:
.parentcontainer {
height: calc(100vh - 50px);
max-width: '100%';
display: inline-block;
width: 100vw;
}
标签 CSS:
position: 'fixed',
padding-bottom: '10px',
bottom: '0',
width: '100%',
max-width: '420px',
这对我们有用,而且行为是您想要的。
关于reactjs - Antd 中的固定宽度列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64705674/