大佬教程收集整理的这篇文章主要介绍了Bootstrap 3 – 按钮高度匹配面板(CSS3),大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
但是,我得到这个:
见js@R_301_1567@:http://jsfiddle.net/abehnaz/8sPn7/3/
我尝试了高度:100%的CSS,但我没有运气.我认为这可能与按钮样式优先于高度设置或面板根据其@L_673_8@(在本例中为图像)采取动态高度的事实有关.
有没有跨浏览器/纯CSS的方式来使按钮高度匹配面板高度(适当的填充和@L_673_8@的拟合)?
谢谢!
HTML:
<div class="panel panel-default"> <div class="panel-body"> <div class="media"> <div class="media-object pull-left"> <button class="btn btn-info option-button">A</button> <img src="holder.js/200x100" /> </div> <div class="media-body"> Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis </div> </div> </div>
CSS:
.option-button { height:100%; }
**编辑:**要获得可接受的解决方案,我最终使用媒体对象中的按钮.它不会自动适应整个高度,但它完成了这项工作.它有助于应用.btn-lg类.
想想这样,浏览器需要一些数字才能开始100%,当所有父div都有高度:100%;它使用视口(窗口大小)作为该数字.如果你曾试图做一个粘性页脚,你可能遇到类似的问题.
这是一个指定高度的js@R_301_1567@:@H_404_2@http://jsfiddle.net/8sPn7/5/
这是另一个js@R_301_1567@与所有高度100%(一个快速肮脏的方式来显示你的100%规则):@H_404_2@http://jsfiddle.net/8sPn7/6/
以上是大佬教程为你收集整理的Bootstrap 3 – 按钮高度匹配面板(CSS3)全部内容,希望文章能够帮你解决Bootstrap 3 – 按钮高度匹配面板(CSS3)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。