Angular Material 布局演示不起作用答案

【问题标题】：Angular Material layouts demo isn't workingAngular Material 布局演示不起作用
【发布时间】：2015-11-27 02:38:32
【问题描述】：

我正在尝试运行 Angular Material 网格布局演示，该演示可以在 here 找到，标题为 Flex Percent Values。

我的 HTML 代码摘录如下：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1" />
  <!-- LINK TO LOCAL BUT HOW? -->
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc4/angular-material.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="../../../bower_components/angular-material/modules/css/angular-material-layouts.css">
  <base href="/">
</head>
<body data-ng-app="MyApp" data-ng-controller="MainCtrl">
    <div layout="row" layout-wrap>
      <div flex="30">
        [flex="30"]
      </div>
      <div flex="45">
        [flex="45"]
      </div>
      <div flex="25">
        [flex="25"]
      </div>
      <div flex="33">
        [flex="33"]
      </div>
      <div flex="66">
        [flex="66"]
      </div>
      <div flex="50">
        [flex="50"]
      </div>
      <div flex>
        [flex]
      </div>
    </div>
    <div ng-view></div>
<!-- Angular Material Dependencies -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-aria.min.js"></script>

<!-- Angular Material Javascript now available via Google CDN; version 0.11.2 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.js"></script>

当我添加像 md-button 这样的 Material Angular 元素时，它们会渲染，尽管与布局相关的任何内容都不起作用。我已经仔细检查了我正在导入我需要的所有样式表，我想我是。不过我不确定是什么问题。

【问题讨论】：

标签： javascript angularjs material-design angular-material

【解决方案1】：

您正在链接到 1.0.0-rc4 版本的 CSS 样式表，但您正在加载 0.11.2 版本的脚本...

我很确定这就是问题所在！

【讨论】：