Question

我在本地机器上创建了AMD的简单页面。我使用<div layout="row">将页面分成2列，部分就像bootstrap col-md-6一样，我提到了这个链接：
[https://material.angularjs.org/1.0.5/layout/container][1]

但是当我运行这个我的本地主机只是获得像HTML一样的视图。所有内容都显示为默认左侧我希望像bootstrap容器一样居中，是缺少的东西???

<!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> aaa@gmail.com</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> aaa.in@gmail.com</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>

Answer 1

你的Div必须在你的layout="row" div内，因为这将定义你的行和内部行将使用flex

分成相等的宽度

请参阅material design doc

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

角度材料设计页面布局容器未正确显示

1 个答案: