угловой конструктор макета страницы не отображается правильно

Я создал простую страницу в AMD на моей локальной машине. Я использовал <div layout="row">, чтобы разделить страницу на 2 столбца, части, похожие на bootstrap col-md-6, и я ссылался на эту ссылку :
[https://material.angularjs.org/1.0.5/layout/container][1]угловой конструктор макета страницы не отображается правильно

но когда я запустил этот мой локальный хост, просто получив представление, как HTML. также весь контент отображается по умолчанию слева, я хочу быть как центрированный, как загрузочный контейнер, что-то не хватает ???

<!DOCTYPE html> 
<html> 

    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black"> 

    <link rel="stylesheet" href="angular-material/angular-material.css"> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
    <link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'> 

    </head> 

    <body> 

    <div layout="row" layout-margin> 
     <div flex> 
     <h1>CONTACT US</h1> 
     <p><b>Address: </b></br> 
      aaa aaa,</br> 
      aaa aaa,</br> 
      aaa aaa,</br> 
      aaa,aaa.</p> 

     <p><b>Contact No's:</b></br> 
      <p>aaa aaa :+910000000000</p> 
      <p>aaa aaa :+910000000000</p> 
      <p>aaa aaa:+910000000000</p> 
     </p> 

     <p> [email protected]</p> 

     <p> 
      <p><b>Website</b></p> 
      www.aaa.in 
     </p> 
     </div> 
    </div> 
    <div layout="row" layout-margin> 
     <div flex> 
     <md-content class="md-padding"> 
      <div flex-sm="100" flex-gt-sm="80" layout-sm="column"> 
      <form name="contactForm" data-ng-submit="cf.sendMail()"> 
       <md-input-container> 
       <label>Name:</label> 
       <input ng-model="cf.contactName" required> 
       </md-input-container> 
       <md-input-container flex> 
       <label>Email:</label> 
       <input type="email" ng-model="cf.contactEmail" required> 
       </md-input-container> 

       <md-input-container> 
       <label>Message:</label> 
       <textarea ng-model="cf.contactMsg" columns="1" md-maxlength="150" required></textarea> 
       </md-input-container> 

       <md-button type="submit" class="md-primary" ng-class="{'md-raised md-hue-1': (contactForm.$dirty && contactForm.$valid) }" aria-label="Save Project">Send</md-button> 
      </form> 
      </div> 
     </md-content> 
     </div> 
    </div> 

    <!-- 
    <div layout="row" layout-margin> 
     <div flex> 
      <h1>CONTACT US</h1> 
      <p><b>Address: </b></br> 
      aaa,</br> 
      aaa aaa,</br> 
      aaa aaa,</br> 
      aaa,aaa.</p> 

     <p><b>Contact No's:</b></br> 
     <p>aaa :+910000000000</p> 
     <p>aaa :+910000000000</p> 
     <p>aaa :+910000000000</p>   
     </p> 

      <p> [email protected]</p> 

     <p> 
     <p><b>Website</b></p> 
     www.aaa.in 
     </p> 
    </div> 


    <div flex-sm="100" flex-gt-sm="90" flex-gt-md="70" flex-gt-lg="50" class="md-whiteframe-z2"> 
      <md-content class="md-padding"> 
       <div flex-sm="100" flex-gt-sm="80" layout-sm="column"> 
        <form name="contactForm" data-ng-submit="cf.sendMail()"> 
         <md-input-container> 
          <label>Name:</label> 
          <input ng-model="cf.contactName" required> 
         </md-input-container> 
         <md-input-container flex> 
          <label>Email:</label> 
          <input type="email" ng-model="cf.contactEmail" required> 
         </md-input-container> 

         <md-input-container> 
          <label>Message:</label> 
          <textarea ng-model="cf.contactMsg" columns="1" md-maxlength="150" required></textarea> 
         </md-input-container> 

         <md-button type="submit" class="md-primary" 
            ng-class="{'md-raised md-hue-1': (contactForm.$dirty && contactForm.$valid) }" 
            aria-label="Save Project">Send</md-button> 
        </form> 
       </div> 
      </md-content> 
     </div> 
     </div> 
    --> 





    <script src="angular/angular.js"></script> 
    <script src="angular-material/angular-material.js"></script> 
    <script src="angular-aria/angular-aria.js"></script> 
    <script src="angular-animate/angular-animate.js"></script> 
    <script src="angular/angular-ui-router.min.js"></script> 

    </body> 

</html>

источник

2016-09-13 amar ghodke

ваши оба div должен быть внутри div, который имеет layout = "row" –

вы можете редактировать его здесь ?? –

Ваш Div должен иметь, чтобы внутри layout="row" DIV, так как это будет определено ваш Row и внутри строки будут разделены на равные ширине за счет использования flex

См material design doc

<div layout="row"> 
    <div flex>First item in row</div> 
    <div flex>Second item in row</div> 
</div>

источник

2016-09-13 09:22:00

извините, сэр, все еще выглядит так же. I скопирован и запущен как есть. Любой файл отсутствует ??? –

Я уже следил за материалом. Код doc.my уже имеет этот формат, но все еще не работает. –

угловой конструктор макета страницы не отображается правильно

ответ

Смежные вопросы