Angular Material Design - 在小屏幕上使用 flex wrap答案

【问题标题】：Angular Material Design - flex wrap when going small screenAngular Material Design - 在小屏幕上使用 flex wrap
【发布时间】：2017-10-25 11:14:27
【问题描述】：

当屏幕变小时，我试图使纬度和经度以列格式低于数据键。我玩过材料设计 xs 并且不适合我。下面我有代码，现在我隐藏了纬度和经度，因为它们在喜欢 iPhone-5 屏幕尺寸时会被切断

div layout layout-align="space-between center">
                    <div class="md-inline-edit-input " class="dkey-inline">
                        <strong id="dkey-label">Data Key:</strong>
                        <inline-edit identifier="'asset-name'" value="$ctrl.asset" display="$ctrl.asset.dataKey" value-name="'data key'" on-update="$ctrl.updateDataKey"></inline-edit>
                    </div>


                    <div ng-if="$ctrl.asset.latitude && $ctrl.asset.longitude" class="ng-animate-disabled" layout layout-align="space-between center">
                        <div style="padding-right:15px;"><strong class="lat-long-label">{{'LABELS.LAT'|translate}}:</strong><span>{{$ctrl.asset.latitude}}</span></div>
                        <div><strong class="lat-long-label">{{'LABELS.LONG'|translate}}:</strong><span>{{$ctrl.asset.longitude}}</span></div>
                    </div>

【问题讨论】：

标签： css angularjs flexbox angular-material

【解决方案1】：

       <div layout layout-xs="column" layout-align='space-between center' layout-align-xs='center start'>
                <div  class="md-inline-edit-input " class="dkey-inline">
                    <strong id="dkey-label">Data Key</strong>
                    <inline-edit identifier="'asset-name'" value="$ctrl.asset" display="$ctrl.asset.dataKey" value-name="'data key'" on-update="$ctrl.updateDataKey"></inline-edit>
                </div>
       
                <div>
                    <div  ng-if="$ctrl.asset.latitude && $ctrl.asset.longitude" class="ng-animate-disabled" layout>
                            <span layout layout-padding>
                                <strong translate="LABELS.LAT"></strong>
                                <label>{{$ctrl.asset.latitude | number: 2}}</label>
                            </span>
                            <span layout layout-padding>
                                <strong translate="LABELS.LONG"></strong>
                                <label>{{$ctrl.asset.longitude | number: 2}}</label>
                            </span>
                    </div>


                    <div ng-if="!$ctrl.asset.latitude || !$ctrl.asset.longitude" class="ng-animate-disabled">
                        <label>No Location Information Available</label>
                    </div>
                </div>


            </div>

不得不使用材料中断重写整个部分。

【讨论】：