0
ローカルマシンでAMDのシンプルページを作成しました。を使用してページを2列に分割しました。これはブートストラップ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>
あなたの両方divはlayout = "row"のdiv内にある必要があります –
ここで編集できますか？ –