Question

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

我的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这样的材质角度元素时，它们会渲染，尽管任何布局相关都不起作用。我已经仔细检查过我正在导入我需要的所有样式表，我想我是。我不确定有什么问题。

Answer 1

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

我很确定这就是问题！

Angular Material布局演示不起作用

1 个答案: