Question

我正在尝试创建一个水平居中的可变边距网格，该网格具有固定的列宽，但列数是响应的。

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

会修复列宽，但它不起作用。

Answer 1

如果您尝试调整底部工作表的大小，请在flex="..."代码中添加md-bottom-sheet并将其与中心对齐，将layout-align="..."添加到md-buttom-sheet代码中。如果那不是你想要做的，请告诉我。 -

角度材料设计 - 创建响应式固定列宽网格

1 个答案: