使用Material-UI栅格列表模拟引导程序网格

Question

我是Material-ui的新手，我使用的是ReactJS。我有这个jsfiddle，但使用Bootstrap。我想知道如何使用React Material-UI编码带有标题的2列面板。

我想要实现这个布局 - http://imgur.com/a/bzkOd

这里是引导片段：

<div class="row"> 
    <div class="col-xs-12">Header</div> 
</div> 
<div class="row"> 
    <div class="col-xs-12"> 
     <div class="row"> 
      <!-- Left side --> 
      <div class="col-xs-3"> 
       <div class="row"> 
        <!-- 1st column --> 
        <div class="col-xs-12">Menu 1</div> 
        <div class="col-xs-12">Menu 2</div> 
        <div class="col-xs-12">Menu 3</div> 
        <div class="col-xs-12">Menu 4</div> 
        <div class="col-xs-12">Menu 5</div> 
        <div class="col-xs-12">Menu 6</div> 
       </div> 
      </div> 

      <!-- Right side --> 
      <div class="col-xs-9"> 
       <div class="row"> 
        <!-- 3rd column --> 
        <div class="col-xs-12">Dashboard</div> 
        <!-- 4th column --> 
        <div class="col-xs-12">Device Statistics</div> 
        <!-- colspan 2 --> 
        <div class="col-xs-12">Device Health</div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

https://jsfiddle.net/wLob4p03/1/

Answer 1

GridList在material-ui是不是网格布局。看看material design guidelines：

网格列表是标准列表视图的替代方法。

你需要自己实现网格布局或使用一些准备好的库。有很多人，这通常是基于引导电网，或非常相似：

• bootstrap-grid-react
• ReactGrid
• react-virtualized（对于一些更高级的需求）

你很可能找到比这更多的东西，找到最适合您需求的产品。就我个人而言，我创建了自己的网格组件来完全控制它。

Answer 2

我认为答案应该更新，因为Material UI已经实现了自己的Flexbox布局，非常像Bootstrap（https://material-ui-1dab0.firebaseapp.com/layout/responsive-ui）。

注意：虽然这不是Material-UI Grid列表。

看来他们最初想保持自己纯粹是一个'组件'库。但是其中一位核心开发人员认为太重要了，不要有自己的。它现在已经被合并到核心代码中，并且正在按照v1.0.0发布。

目前（2017年4月）它仍在下一个/ alpha分支上。您可以通过安装它：

npm install material-ui@next

信用这个答案：icc97 - Material UI and Grid system