Question

我刚开始使用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();
  };

}]);

请帮忙。

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。

DEMO：http://codepen.io/anon/pen/epyQVN

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

1 个答案: