角材料響應div

我不能使div響應。我如何使他們響應？尺寸減小時，內容框應該顯示爲一個在另一個下面。以下是從另一個codepen和角度材料網站獲取的代碼。角材料響應div

  <h1>User List</h1> 
    <div class='md-padding' layout="row" flex> 
    <div layout="row" flex> 
     <div class="parent" layout="column" ng-repeat="user in users" flex> 
     <md-card> 
      <img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar"> 
      <md-card-content> 
      <h2>{{user}}</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> 
      </md-card-content> 
      <div class="md-actions" layout="row" layout-align="end center"> 
      <md-button>Save</md-button> 
      <md-button>View</md-button> 
      </div> 
     </md-card> 
     </div> 
    </div> 
    </div> 

    </md-content>

鏈接代碼筆 enter link description here

來源

2016-09-18 Volleyball Player

下面是如何做到這一點的例子 - CodePen

的information in the docs是相當有價值的信息有關響應式設計。

標記

<div class='md-padding' layout="row" flex> 
     <div layout="row" layout-xs="column" flex> <!-- define layout here --> 
      <div class="parent" layout="column" ng-repeat="user in users" flex> 
       <md-card> 
        <img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar"> 
        <md-card-content> 
         <h2 class="user">{{user}}</h2> 
         <p class="userInfo">Lorem ipsum</p> 
        </md-card-content> 
        <div class="md-actions" layout="row" layout-align="end center"> 
         <md-button>Save</md-button> 
         <md-button>View</md-button> 
        </div> 
       </md-card> 
      </div> 
     </div> 
    </div>

來源

2016-09-19 08:15:19

角材料響應div

回答

相關問題