Question

我在angular-md中非常新，并试图制作明显的东西 - sidenav用右边的卡片。代码并不那么难http://codepen.io/anon/pen/qZPRmq

<body ng-app="BlankApp" ng-cloak layout="column">
<div flex layout="row">
    <md-sidenav md-is-locked-open="true" class="md-sidenav-left md-whiteframe-z2" layout="column">
      Some form here
    </md-sidenav>

    <!-- Container #4 -->
    <md-content flex layout="column" class="md-padding" layout-padding>
        <md-grid-list flex md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6"
                      md-row-height="2:2"  md-gutter="12px" md-gutter-gt-sm="8px">
            <md-grid-tile flex>
                <md-card>
                    First card here
                </md-card>
                <md-card>
                  Second card here
                </md-card>
            </md-grid-tile>
        </md-grid-list>
    </md-content>
</div>

但问题是md-grid-tile远离md-content块并且被sidenav（有时候是md-toolbar）重叠。我做错了什么？

Answer 1

更改

        <md-grid-tile flex>
            <md-card>
                First card here
            </md-card>
            <md-card>
              Second card here
            </md-card>
        </md-grid-tile>

到

        <md-grid-tile>
            <md-card>
                First card here
            </md-card>
        </md-grid-tile>
        <md-grid-tile>
            <md-card>
              Second card here
            </md-card>
        </md-grid-tile>

angular-md md-grid-list隐藏在md-sidenav下

1 个答案: