材料设计网格不能很好地工作

Question

我在中画面上遇到材质网格问题。相同的代码适用于bootstrap：

在重大案例中：

http://codepen.io/lampt2509/pen/egdZxp

<div class="container">
    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--4-col"></div>
        <div class="mdl-cell mdl-cell--8-col"></div>
    </div>
</div>

.mdl-cell {
  height: 100px;
}

.mdl-cell:nth-child(1) {
  background: red;
}

.mdl-cell:nth-child(2) {
  background: blue;
}

使用bootstrap：

http://codepen.io/lampt2509/pen/VPKaRr

<div class="container">
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-8"></div>
  </div>
</div>

.row > div {
  height: 100px;
}

.row > div:nth-child(1) {
  background: red;
}

.row > div:nth-child(2) {
  background: blue;
}

有什么想法吗？谢谢！

Answer 1

我没有注意到材料文档中的以下行。它与bootstrap不同。

  

网格屏幕尺寸为12列，平板电脑尺寸为8列，手机尺寸为4列

所以单元格的类必须成为：

<div class="mdl-cell mdl-cell--4-col mdl-cell--3-col-tablet mdl-cell--1-col-phone"></div>
<div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-tablet mdl-cell--3-col-phone"></div>

http://codepen.io/lampt2509/pen/BpLzNb

它有效。