Question

我正在寻找一种方法来实现响应式网格系统，以使用react和material-ui开发材料设计应用程序。
虽然React-Bootstrap有this，但我还没有找到类似于Material-UI的内容。 GridList很好，但不完全一样。对此有什么解决方案吗？

Answer 1

而是使用内联样式的材料 - 我正在使用带有Material-UI的引导程序。它运作良好而简单。这是一个例子。

<div className="Container">
<button className="btn btn-primary"> Action</button>
<div className="row">

     <div className="col-sm-4">
           <ReactAutoForm collection={DoctorCategories} type="insert" debug={true} />
      </div>

      <div className="col-sm-8">
            <table><TableHeader><TableRow>
                                        <TableHeaderColumn>Name</TableHeaderColumn>
                                        <TableHeaderColumn>Description</TableHeaderColumn>
                                        <TableHeaderColumn>Edit</TableHeaderColumn>
                                    </TableRow>
      </TableHeader>
      <TableBody>
</TableBody>
 </TableBody>
                            </table>
                            </div>

</div>
</div>

Answer 2

似乎反应 - 内联网格（http://broucz.github.io/react-inline-grid/）可能是解决此问题的好方法。

这个lib背后的概念非常接近Bootstrap网格系统背后的概念，它使用内联样式。

Answer 3

我创建了两个实现Material Design网格系统的包。第一个，material-responsive-grid是一个CSS框架，第二个react-material-responsive-grid是一组实现此框架的React组件。

这些软件包遵循Google概述的responsive UI标准，因此您无需决定每个其他UI框架实施的各种断点。考虑到正确的装订线，建议的列数，甚至超过1600 dp的布局行为，都支持其标准中指定的所有视口大小。它应该按照Device Metrics指南中每个设备的建议行事。

每个包都可以在github上找到，并包含一个示例React应用程序。

如果您有任何问题，请与我们联系。

Answer 4

现在，Material-UI拥有自己的Flexbox布局。它在alpha分支中您可以通过Material-UI最新版本

使用它

npm install material-ui@next

有关更详细的文档和示例，请访问此链接https://material-ui-1dab0.firebaseapp.com/layout/responsive-uie-ui

React Material-UI网格系统

4 个答案: