Antd中的固定宽度列？

Question

我已经阅读了Antd的布局设计文档以及Grid和Layout的文档。但我不明白如何在Antd中实现以下设计：

• 我希望我的应用程序只有一个居中的列。

• 在宽屏幕（横向客户端）上，中心列应该相对较窄。在网格方面，可能是8个单位。

  

• 在窄屏幕（纵向客户端）上，中心列应使用相对较大的宽度。在网格方面，最多可达24个单位，以适应非常窄/小的屏幕尺寸。

  

基本上听起来像是我正在寻找具有最大宽度限制的好的旧容器。显然，我可以想出一些自定义CSS来为自定义<div>样式，但这让我想知道：

• 我是否漏掉了什么，或者Antd的布局系统确实没有本地实现这一点的方法？
• 如果是这样，那么在现代UI设计哲学方面，我是否做错了什么？

- bluenote10

Answer 1

我们做到了这一点。虽然不是通过Ant Design，但我们在其中使用了很多Ant Design。

我不确定还有什么其他解决方案，但这就是我们的做法。你提到的容器是我们网站的父容器，里面的所有内容都在其中渲染。

我们在主容器内创建了一个路由（作为底部选项卡，所以对我们很方便），并将其最大宽度设置为420px。由于所有内容都包含在底部选项卡中，当在横向客户端上时，我们的应用程序居中显示，在纵向模式下则填充宽度。

代码如下（这是一个React应用程序）：

App Container CSS:

.App {
  text-align: center;
   height: 100vh !important;
}

父容器CSS：

.parentcontainer {
  height: calc(100vh - 50px);
  max-width: '100%';
  display: inline-block;
  width: 100vw;
}

Tab CSS：

position: 'fixed',
padding-bottom: '10px',
bottom: '0',
width: '100%',
max-width: '420px',

这对我们有用，而且行为符合您的期望。

- Ankit Maloo