Question

我正在使用Google的MDL构建网站，并想知道如何正确使用嵌套网格。

每个嵌套级别向右移动一点。当你只想列出一些产品或者有其他嵌套的单元格时，这就变得很奇怪了。

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--8-col">
    <h1>Page Titel</h1>
    <p>Some content</p>
    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--6-col">
        Product #1
          <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--6-col">
              <img src="http://placehold.it/100" alt="" />
            </div>
            <div class="mdl-cell mdl-cell--6-col">
               Product Description
              <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
              </ul>
            </div>
        </div>
      </div>
      <div class="mdl-cell mdl-cell--6-col">
        Products #2 <br />
        …
      </div>
    </div>
  </div>
  <div class="mdl-cell mdl-cell--4-col">
    <h3>Sidebar</h3>
  </div>
</div>

我知道的网格（如果我没有错:-)垂直排成一行。因此，标题，内容，产品标题和图片完全一致。

有一个mdl-grid - 无间距类，但这会删除所有间距。即使是在牢房和右边。

也许我错过了MDL概念中的某些东西，或者我必须编写自己的＆＃34;网格类＆＃34;。也许我正在做其他错事： - ）

Answer 1

Tadashi在这里有一个codepen：

https://codepen.io/tadashi1105/pen/MwPOJx

他通过添加nesting修饰符来扩展MDL：

.mdl-grid .mdl-grid.mdl-grid--nesting {
  padding: 0;
  margin: 0 -8px;
}

提供的标记如下：

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

我是MDL的新手，但通过提供自己的BEM结构扩展基本库 - 块，元素和修饰符（参见https://en.bem.info/methodology/quick-start/） - 似乎是这里的范例。这样，它与Bootstrap或Foundation有点不同。

Material Design Lite：嵌套网格

1 个答案: