Question

我无法让div响应。我如何让他们回应？当尺寸减小时，内容框应该一个在另一个下面。下面是从另一个codepen和angular材料网站获取的代码。

         <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

Answer 1

以下是如何操作的示例 - 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>

角度材料的响应div

1 个答案: