Угловой дизайн материала - создание адаптивной сетки с фиксированной шириной колонны

0

Я пытаюсь создать горизонтально-центрированную сетку с переменными полями, которая имеет фиксированные ширины столбцов, но количество столбцов является отзывчивым.

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

будет исправлять ширину столбцов, но он не работает.

Теги:
angular-material

1 ответ

0

Если вы пытаетесь изменить размер нижнего листа, добавьте flex="..." в тег md-bottom-sheet и выровняйте его по центру, добавьте layout-align="..." в тег md-buttom-sheet, Если это не то, что вы пытаетесь сделать, сообщите мне. -

  • 0
    Я не пытаюсь изменить размер нижнего листа. Я пытаюсь сделать столбцы сетки фиксированной ширины с фиксированными желобами / заполнением.
  • 0
    Кроме того, если md-grid-list не является решением, я не привязан к нему. Я просто хочу создать сетку с таким количеством отзывчивых столбцов: md-cols-xs = "1" md-cols-sm = "3" md-cols-md = "5" md-cols-lg = "7" md-cols-gt-lg = "11" и имеет фиксированную ширину столбцов и желобов.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню