Material Design Lite:嵌套网格
Material Design Lite:嵌套网格
提问于 2016-12-09 22:04:30
我正在用谷歌的MDL建立一个网站，想知道如何正确地使用嵌套网格。
每个嵌套级别都会稍微向右移动。当您只想列出一些产品或具有其他嵌套的单元格时，这会变得非常奇怪。
请参阅http://codepen.io/suntrop/pen/BQPody
<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--no-spacing类，但这会删除所有间距。甚至在牢房下面和右边。
也许我遗漏了MDL概念中的某些东西，或者我不得不编写自己的“网格类”。也许我做错了什么:-)
回答 1
Stack Overflow用户
发布于 2018-01-21 06:05:53
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，但是通过提供自己的边界元结构--块、元素和修饰符(参见https://en.bem.info/methodology/quick-start/) --来扩展基本库似乎就是这里的范例。在这种情况下，它与Bootstrap或Foundation略有不同。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41062215
复制相关文章
相似问题
腾讯云开发者
