角度材质：嵌套网格
Posted
技术标签:
【中文标题】角度材质：嵌套网格【英文标题】：Angular Material: Nested grid 【发布时间】：2015-12-29 16:30:26 【问题描述】：我目前正在将 Bootstrap 用于 Web 应用程序，但想切换到 Angular Material。现在我正在玩网格。
我有三重嵌套网格结构。我认为孩子们的显示不正确，或者至少我没有对它们进行编程以正确显示。我希望它们不要垂直居中，但我不知道它们为什么会这样。
此外，我希望grid-title 的标题不会干扰子grid-list（我希望子grid-list 从grid-title-header 下方开始）。 “最老”的父级页脚也是如此。
Angular Material site 有很好的文档，但不涉及嵌套网格。
Here is a plnkr.
<body ng-app="app">
<md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6"
md-row-height-gt-md="1:1" md-row- md-gutter="8px"
md-gutter-gt-sm="4px" class="gridList">
<md-grid-tile md-rowspan="1" md-colspan="1" md-colspan-sm="1" class="gridTile">
<md-grid-list flex="" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6"
md-row-height-gt-md="1:1" md-row->
<md-grid-tile md-rowspan="2" md-colspan="1" class="flexTile">
<md-grid-tile-header><h4>Sub-cluster Title</h4></md-grid-tile-header>
<md-grid-list flex="" md-cols-sm="1" md-cols-md="2" md-cols-gt-md="3"
md-row->
<md-grid-tile md-colspan="1" md-rowspan="2" class="instanceTile">
ID
</md-grid-tile>
</md-grid-list>
</md-grid-tile>
</md-grid-list>
<md-grid-tile-footer><h3>Cluster name</h3></md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>
</body>
到目前为止，我真的很喜欢 Material Design，并且相信它是响应式网页设计的未来。我认为越来越多的网站将使用它来代替 Bootstrap（Bootstrap 的 JS 组件完全依赖于 jQuery，除非您使用的是 AngularUI 之类的东西），所以我想学习如何正确使用它。
【问题讨论】：
【参考方案1】：我相信 Angular Material 网站缺少有关此布局指令的文档，但 layout-fill 正是我想要的。
Here's an updated plnkr.
只需在嵌套网格列表中定义layout-fill。
<md-grid-list flex md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6"
md-row-height-gt-md="1:1" md-row- md-gutter="8px"
md-gutter-gt-sm="4px" class="gridList" layout="row">
<md-grid-tile md-colspan="1" md-colspan-sm="1" class="gridTile">
<md-grid-list flex md-cols-md="6" md-row-height-md="1:1" md-gutter="4px"
md-rows-md="4" layout-fill>
<md-grid-tile md-colspan="1" md-rowspan="1" layout="col"
class="flexTile">
Tile
</md-grid-tile>
</md-grid-list>
<md-grid-tile-footer><h3>Cluster name</h3></md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>
然后放大...
<md-grid-list flex md-cols-md="6" md-row-height-md="1:1" md-gutter="4px"
md-rows-md="4" layout-fill>
<md-grid-tile md-colspan="1" md-rowspan="1" layout="col"
class="flexTile">
Tile
</md-grid-tile>
</md-grid-list>
此解决方案不包括平铺页眉和页脚的解决方案，但我想您只需定义某种定位即可使其正常工作。
【讨论】：
以上是关于角度材质：嵌套网格的主要内容，如果未能解决你的问题，请参考以下文章