材质用户界面和网格系统
我正在玩Material-UI 。 有没有创build网格布局的任何选项（如在Bootstrap中 ）？
如果不是，那么添加这个function的方法是什么？
有一个GridList组件，但我想它有一些不同的目的。
Material UI已经实现了自己的Flexbox布局。
看起来他们最初想保持自己纯粹是一个“组件”库。 但是其中一位核心开发人员认为太重要了，没有自己的 。 现在它已经被合并到核心代码中 ，并且正在按照v1.0.0发布。
目前（2017年9月），它在alpha版本的下一个/ beta分支上移动，所以希望它更稳定一些。 你可以通过以下方式安装
npm install material-ui@next 有代码示例的预览 。
更新：我已经在我没有任何问题的项目中实现了他们的网格系统。
更新2： 由Suresh评论 ， SelectField尚未迁移
更新3：select字段从v1.0.0-beta.9迁移
从材料devise规格的描述：
网格列表是标准列表视图的替代方法。 网格列表与用于布局和其他可视化演示的网格不同。
如果您正在寻找一个非常轻量级的Grid组件库，我正在使用React-Flexbox-Grid ， React中的flexboxgrid.css的实现。
最重要的是， React-Flexbox-Grid在material-ui和react-toolbox （替代材料devise实现）方面都performance出色。
我环顾四周寻找答案，我发现最好的方法是在不同的组件上使用Flex和内联样式。
例如，要使两个纸张组件以2个垂直分量（按1：4的比例）划分我的全屏，以下代码正常工作。
const styles = { div:{ display: 'flex', flexDirection: 'row wrap', padding: 20, width: '100%' }, paperLeft:{ flex: 1, height: '100%', margin: 10, textAlign: 'center', padding: 10 }, paperRight:{ height: 600, flex: 4, margin: 10, textAlign: 'center', } }; class ExampleComponent extends React.Component { render() { return ( <div> <div style={styles.div}> <Paper zDepth={3} style={styles.paperLeft}> <h4>First Vertical component</h4> </Paper> <Paper zDepth={3} style={styles.paperRight}> <h4>Second Vertical component</h4> </Paper> </div> </div> ) } }
现在，通过更多的计算，您可以轻松地将组件分配到一个页面上。
进一步阅读flex
我希望现在还不迟，作出回应。
我也在寻找一个简单，强大，灵活和高度可定制的引导程序，比如在我的项目中使用反应网格系统。
我所知道的最好的答案是react-pure-grid https://www.npmjs.com/package/react-pure-grid
react-pure-grid为您提供定制网格系统各个方面的能力，同时它已经构build了可能适用于任何项目的默认值
用法
npm install react-pure-grid --save
–
import {Container, Row, Col} from 'react-pure-grid'; const App = () => ( <Container> <Row> <Col xs={6} md={4} lg={3}>Hello, world!</Col> </Row> <Row> <Col xsOffset={5} xs={7}>Welcome!</Col> </Row> </Container> );
我只是使用https://react-bootstrap.github.io/作为Responsive Layout和Material-ui作为所有组件
我很难find一个实现Material Design响应行为标准的UI框架，所以我创build了两个实现Material Design网格系统的包：
- 一个CSS框架： material-responsive-grid
- 一组实现该框架的React组件： react-material-responsive-grid 。
这些软件包遵循Google概述的响应式UI标准。 支持标准中指定的所有视口尺寸时，应考虑适当的排水沟，build议的列数以及超过1600 dp的布局行为。 它应该按照“ 设备度量标准”指南中的每个设备的build议操作。
我的方式是去http://getbootstrap.com/customize/只检查“网格系统”下载。; 在下载的文件中有bootstrap-theme.css和bootstrap.css ，我只需要后者。
通过这种方式，我可以使用Bootstrap的网格系统，以及Material UI中的其他所有内容。
这是一个老问题，但谷歌带我到这里。 经过一番search，我发现一个很好的包： https ： //www.npmjs.com/package/react-grid-system
我认为这是最好的，易于使用和轻量级。
