我刚开始使用angular-material . 我正在尝试 grid在我的示例中，我正在测试 flex 属性。在示例中，这为每个 flex 元素显示了三种不同的颜色，但在 codepen 中，我没有得到那些颜色。
这是我的代码:
HTML:
<html lang="en" ng-app="StarterApp">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<meta name="viewport" content="initial-scale=1" />
</head>
<body layout="column" ng-controller="AppCtrl">
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
<md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
</md-button>
<h1>Hello World</h1>
</div>
</md-toolbar>
<div layout="row">
<div flex>
[flex]
</div>
<div flex>
[flex]
</div>
<div flex hide-sm>
[flex]
</div>
</div>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
</body>
</html>
JS:
var app = angular.module('StarterApp', ['ngMaterial']);
app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav){
$scope.toggleSidenav = function(menuId) {
$mdSidenav(menuId).toggle();
};
}]);
请帮忙。
最佳答案
示例中未包含 css。那里的颜色表示网格大小之间的差异。您可以使用 CSS3 第 n 个子选择器为它们着色。您可以在此处找到文档:http://www.w3schools.com/cssref/sel_nth-child.asp
作为您的代码示例，您可以拥有
#parentDivId div:nth-child(1) {
background: red;
}
#parentDivId div:nth-child(2) {
background: blue;
}
#parentDivId div:nth-child(3) {
background: yellow;
}
如此等等。将 parentDivId 重命名为父 DIV 的 ID。
关于javascript - 网格系统不显示文档中的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33257592/