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

前端之家收集整理的这篇文章主要介绍了css – 带有标头标签(h1)的Bootstrap 3面板标题不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用面板,我希望面板标题更大.所以我读了 bootstrap doc for panel,看到我可以在div.panel-header中使用h1.panel-title.他们甚至会给你加价.我用h1将标记粘贴在我的页面中,但它不起作用.

HTML:

@H_403_4@<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>

结果:

我尝试使用引导类,但它下面添加了许多不受欢迎的空格.如果我排除了面板标题类,则面板标题中有太多边距.我该如何工作?

解决方法

新答案

感谢评论,@ ShawnAnderson.你是绝对正确的.您需要做的就是删除面板标题类,h1将起作用.

@H_403_4@<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:

@H_403_4@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; }

结果:

这有效,但我想知道是否有人有更好的想法.

猜你在找的CSS相关文章