在Antd中固定宽度的列？

如何解决在Antd中固定宽度的列？

我已经阅读了Antd的layout design documents和Grid和Layout上的文档。我不明白的是如何在Antd中完成以下设计：

我希望我的应用具有一个居中的列。
在宽屏（横向客户端）上，中心列应相当窄。就网格而言，可能是8个单位。
在窄屏（人像客户端）上，中心列应使用相对较大的宽度。对于非常窄/小尺寸的屏幕，最多可显示24个单元。

基本上，这听起来像是我在寻找具有最大宽度的旧容器。我显然可以提出一些自定义CSS来设置自定义class App extends React.Component<{},State> { state = { searchInput: "" }; resetTextBox() { console.log("It's happening!"); this.setState({ searchInput: "" }); } render() { return ( <div> <div className="grid-container"> <div className="header"> <SearchBoxContainer text={this.state.searchInput} onChangeText={(text) => this.setState({ searchInput: text })} /> </div> <FacetBoxContainer resetAll={this.resetTextBox} /> <ResultsContainer /> </div> </div> ); } }的样式，但这使我感到奇怪：

我错过了什么吗，还是真的没有办法用Antd的布局系统来实现？
如果是这样，那么我在现代UI设计理念方面做错了吗？

解决方法

我们已经做到了。并非完全通过 Ant Design，而是在其中使用了大量 Ant Design。

我不确定其他解决方案是什么，但我们就是这样做的。您谈到的容器是我们网站的父容器，其他所有内容都在其中呈现。

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

代码清晰。（它是一个反应应用程序）

应用容器 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',

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