reactjs - Antd 中的固定宽度列？

Question

我看过Antd的layout design documents和 Grid 上的文档和 Layout .我不明白的是如何在Antd中完成如下设计:

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

• 在宽屏幕(横向客户端)上，中心栏应该相当窄。就网格而言，可能是 8 个单元。

  

• 在窄屏(纵向客户端)上，中心栏应该使用相对较大的宽度。在非常窄/小的屏幕尺寸的情况下，网格最多 24 个单元。

  

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

• 我是不是遗漏了什么，或者真的没有办法用 Antd 的布局系统来实现它？
• 如果是这样，我是否在现代 UI 设计理念方面做错了什么？

Answer 1

我们已经做到了。不完全是通过 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',

这对我们有用，而且行为是您想要的。