css - 带有 header 标签 (h1) 的 Bootstrap 3 面板标题不起作用

Question

我正在使用面板，我希望面板标题更大。所以我读了bootstrap doc for panel并看到我可以在 div.panel-header 中使用 h1.panel-title。他们甚至给你加价。我用 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>

fiddle :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;
} 

结果:

这行得通，但我想知道是否有人有更好的主意。