網格系統不顯示顏色，如文檔

我剛開始使用。我正在嘗試grid元素在我的例子中，我正在測試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(); 
    }; 

}]);

請幫助。

來源

2015-10-21 Saurabh

該示例中未包含css。顏色表示網格大小之間的差異。你可以使用CSS3的第n個子選擇器給它們着色。您CAND找到文檔在這裏：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

來源

2015-10-21 11:12:55 rpirsc13

好的，我很困惑，因爲這些CSS沒有所述角度文檔中包括在內。謝謝。 – Saurabh

網格系統不顯示顏色，如文檔

回答

相關問題