使用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