角度材質設計 - 走向小屏幕時的柔性包裝

Question

我想在走小屏幕時將緯度和經度放在列格式的datakey下面。我玩過材料設計xs和和不適合我。下面我的代碼，現在我躲在lat和長，因爲他們會喜歡的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> 

Answer 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>

時切斷

必須使用材料中斷重寫整個部分。