Html 材料设计网格不'；工作不好

我对中屏幕上的材质网格有问题。同样的代码也适用于引导：

在重大情况下：

.mdl细胞{
高度：100px；
}
.mdl单元：第n个子单元（1）{
背景：红色；
}
.mdl单元：第n个子单元（2）{
背景：蓝色；
}

使用引导：

.行>分区{
高度：100px；
}
.row>div:n个子项（1）{
背景：红色；
}
.行>分区：第n个子项（2）{
背景：蓝色；
}

---

有什么想法吗？谢谢

我没有注意到物料文档中的以下行。它不同于引导

网格的桌面屏幕大小为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>

---

它是有效的

你可以发布完整的代码或链接到代码笔或类似的是，对不起。我更新了我的帖子。我添加了

宽度：100%并且它工作得很好，您为第一个“mdl单元格”设置了宽度=100%？但是在这种情况下，在大屏幕上，第一个单元格总是有12列。。。不包含4列，为下一个单元格保留8列。
<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;
}

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