我使用 Bootstrap 3 创建具有如下结构的面板,并且希望垂直对齐面板标题内的跨度,而不扩展面板标题的默认高度。
我尝试了不同的方法(添加class="clearfix"
,添加style="vertical-align:middle !important;"
adding style="overflow:hidden !important;"
等),但它们要么被忽略,要么增加面板标题的默认高度。
我的猜测是,这是由于“右拉”类造成的,但由于这是官方的 Bootstrap 类,我希望有一些解决方法。
我怎样才能实现这个目标? (我在链接中使用的图像仅为 32x32,因此其高度小于面板标题的高度。)
面板示例:
<div class="panel panel-primary">
<div class="panel-heading">
Categories
<span class="pull-right"><a href="#"><img src='images/icons/myImage.png' alt='' /></a></span>
</div>
<div class="panel-body">
// ...
</div>
</div>
DEMO: http://jsbin.com/yowis/2/edit http://jsbin.com/yowis/2/edit
<div class="panel-heading clearfix">
这将解决浮动问题。这就是问题所在。
如果您想要文本和图像:
<div class="panel-heading clearfix">
CSS 是:
.panel-heading {line-height:32px;}
如果您不想添加clearfix,请将其放在CSS中的任何位置:
.panel-heading:before {
content: " ";
display: table;
}
.panel-heading:after {
clear: both;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)