Html 引导面板标题更改高度

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/34224785/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 18:37:52  来源:igfitidea点击:

bootstrap panel-header change height

htmlcsstwitter-bootstrap

提问by sch

I'm trying to change height of bootstrapspanel-header, if I change the height using this css:

如果我使用此 css更改高度,我正在尝试更改引导程序面板标题的高度:

style="height: 20px;"

The title inside the header will be missplaced

标题内的标题将错位

See exampleon plunker

参见plunker示例

Why does this happen, and how can I fix it?

为什么会发生这种情况,我该如何解决?

回答by Kristijan Iliev

It's not a good idea what you did, but if you still want to stick with it, then you have to change bootstrap's default panel-heading paddingtoo, like thisto your panel:

这不是你做了什么好主意,但如果你仍然想坚持下来,那么你必须改变引导的默认面板的标题填充太像这样到面板:

 <div style="height: 20px;padding:0" class="panel-heading">

as you can see in the plunker the font-sizeis not the most desirable size so I suggest you to use custom class and not bootstraps .panel-heading

正如您在 plunker 中看到的,这font-size不是最理想的大小,所以我建议您使用自定义类而不是引导程序.panel-heading

回答by Johannes

Just don't do that: The height of this element (including all the text in there, also the second paragraph) adjusts automatically to the text (so that ALL text has the background defined in there). If you manually set the height (as you did), the text will still be visible (since overlapping text is shown), but it won't fit the background.

只是不要那样做:这个元素的高度(包括那里的所有文本,还有第二段)会自动调整到文本(这样所有的文本都有在那里定义的背景)。如果您手动设置高度(正如您所做的那样),文本仍然可见(因为显示了重叠文本),但它不适合背景。

Try adding some text and you'll realize, what I mean.

试着添加一些文字,你就会明白我的意思。