Я пытаюсь создать горизонтально-центрированную сетку с переменными полями, которая имеет фиксированные ширины столбцов, но количество столбцов является отзывчивым.
<md-bottom-sheet class="no-pad">
<nav id="resource-tray">
<md-toolbar>
<div class="md-toolbar-tools">
<h3>title</h3>
<span flex class="flex"></span>
<md-button aria-label="Close Tray" ng-click="closeTray()" id="resource-tray-close-control">X</md-button>
</div>
</md-toolbar>
<md-content layout-align="center">
<md-grid-list
md-cols-xs="1" md-cols-sm="3" md-cols-md="5" md-cols-lg="7" md-cols-gt-lg="11"
md-colspan="173px"
md-row-height="158px">
<md-grid-tile ng-repeat="page in state.pages"
ng-click="selectResource($parent.$index+1)"
md-colspan-gt-sm="1"
md-rowspan-gt-sm="1">
<resource-tile ng-repeat="resource in page.data" ng-click="selectResource($parent.$index+1)"></resource-tile>
</md-grid-tile>
</md-grid-list>
</md-content>
</nav>
</md-bottom-sheet>
В приведенном выше примере я предположил, что установка
<md-grid-list md-colspan="173px" ...>
будет исправлять ширину столбцов, но он не работает.
Если вы пытаетесь изменить размер нижнего листа, добавьте flex="..."
в тег md-bottom-sheet
и выровняйте его по центру, добавьте layout-align="..."
в тег md-buttom-sheet
, Если это не то, что вы пытаетесь сделать, сообщите мне. -