Bootstrap 面板看起来不对

Question

Here's a plunk I've been working on for another question. I'm not sure what I'm doing wrong, but I see the bootstrap examples (plunk)，它们看起来像这样：

虽然我的看起来像这样（具体看 panel-headings / panel-titles）：

我的 panel-heading 根本没有样式，即使我们使用的代码几乎相同：

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<body ng-controller="MainCtrl">
 <div class="container-fluid">
  <div class="panel panel-default">
    <div class="panel-header">
      <h4 class="panel-title" uib-tooltip="ok">ui-grid tester</h4>
    </div>
    <div class="panel-body">
      <button ng-click="changeColumn2Text()">Change Column 2 Text</button>
      <br />
      <br />
      <div class="grid" ui-grid="gridOptions" ui-grid-selection=""></div>
    </div>
  </div>
 </div>
</body>

唯一的区别是他们的面板在模板中（在同一页面上，没有特殊样式或类）用于手风琴，在我看来这不会影响造型。

那我做错了什么？

Answer 1

将 panel-header 更改为 panel-heading class

Bootstrap 面板看起来不对

Bootstrap Panel doesn't look right

angularjs

angular-ui-bootstrap

angular-ui-grid