网格系统不显示文档中的颜色

Question

我刚开始使用angular-material。我正在尝试 grid elements in my example, I am testing flex attribute. In the example, this shows three different color for each flex element, but in the 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();
  };

}]);

请帮忙。

Answer 1

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;
}

如此等等。使用父 DIV 的 ID 重命名 parentDivId。

演示：http://codepen.io/anon/pen/epyQVN

网格系统不显示文档中的颜色

Grid System doesn't shows color as in documentation

javascript

css

flexbox

angularjs

angular-material