带有标题标记（h1）的Bootstrap 3 panel-title无法正常工作

Question

我正在使用面板，我希望面板标题更大。所以我看了bootstrap doc for panel，发现我可以在h1.panel-title内使用div.panel-header。他们甚至会给你加价。我用h1将标记粘贴在我的页面中，但它不起作用。

HTML：

<div class="panel panel-default">
  <div class="panel-heading">
    <h1 class="panel-title">Panel title</h1>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

结果：

我尝试使用lead类，但它下面添加了许多不受欢迎的空格。如果我排除panel-title类，则panel-header中的余量太大。我如何使这项工作？

Answer 1

新答案

感谢评论，@ ShawnAnderson。你是绝对正确的。您需要做的只是删除panel-title类，h1将起作用。

<div class="panel panel-default">
  <div class="panel-heading">
    <h1>Panel title</h1>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

小提琴：https://jsfiddle.net/DTcHh/29507/

这个答案比我原来的答案更受欢迎，因为你不必覆盖任何bootstrap类。

原始答案

如果你在bootstrap.css之后包含它，那么这个少量的css就可以了。

CSS：

h1.panel-title {
    font-size: 36px;
}
h2.panel-title {
    font-size: 30px;
}
h3.panel-title {
    font-size: 24px;
}
h4.panel-title {
    font-size: 18px
}
h5.panel-title {
    font-size: 14px
}
h6.panel-title {
    font-size: 10px;
} 

结果：

这很有效，但我想知道是否有人有更好的想法。

Answer 2

只需将h3更改为h1

<div class="panel panel-default">
  <div class="panel-heading">
    <h1 class="panel-title">Panel title</h1>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>