角材料响应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

回答

相关问题