scharfkantiges Material -md-Grid-Liste Inhalt

Question

Ich versuche md-grid-tile Winkelmaterial Ausgabe zu verwenden, ich bin vor begnügt sich von md-grid-tile ausgerichtet ist center.How machen es

<md-content layout-padding> 

     <md-grid-list md-cols="6" 
      md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter-gt-md="16px" 
      md-gutter-gt-sm="8px" md-gutter="4px"> 
        <md-grid-tile 
        ng-repeat="room in floorDetails.roomDetails" 
        ng-style="{'background': '#f2f2f2'}" 
        md-colspan-gt-sm="3" 
        md-rowspan-gt-sm="2"> 



           <div layout="row" layout-align="center center"> 
           <b >Room1</b> 
           </div> 
           <div class='md-padding' layout="row" layout-wrap> 
             <md-card class="md-card" ng-repeat="bed in room.bedIds"> 
              <md-card-content> 

              </md-card-content> 
             </md-card> 
            </div> 
          </div> 
       </md-grid-tile>   
     </md-grid-list> 

von Anfang zu arbeiten aktuelle Schnapp

Wunschschnapp

Answer 1

Versuchen Sie, beim nächsten Mal einen Codepen/Plunkr mit einem Beispiel bereitzustellen, die Leute sind eher geneigt, Ihnen zu helfen, wenn sie Beispielcode zum Spielen haben.

Sie sollten auf angular-material layout nachlesen. Sie vermissen hauptsächlich einen <div layout="column" layout-fill> Container innerhalb Ihrer md-grid-tile. Die layout-fill bewirkt, dass der Container die gesamte Kachel ausfüllt.

Sie können dann die Größe Ihrer Karten mit festen CSS-Größen anpassen oder sie biegen. Das Beispiel biegt sie horizontal, was nicht erwünscht sein kann.

codepen