关于UEditor与Bootstrap结合使用时产生的工具栏边距错乱现象的解决方法

UEditor与Bootstrap是前端常用到的工具,最近使用Ueditor时遇到一个工具栏样式错乱问题,如图示

仅从表面看工具栏几乎没什么问题,事实上所有的工具项整体往左偏移部分边距,当点击字体颜色时,现象就较明显,可以看到字体颜色下拉列表左右边距不齐,字体溢出等情况。

出现这种情况的原因在于box-sizing属性,box-sizing是css3的box属性之一,关于box-sizing属性的取值有三种:

content-box:padding和border不被包含在定义的width和height之内。(默认值)

border-box:padding和border被包含在定义的width和height之内。

inherit:从父级继承。

bootstrap中其值设置为border-box,而在UEditor中未设置明确对应属性值,即是默认值content-box,浏览器渲染页面时采用了bootstrap的属性,正是由于conten-box和border-box两者对元素width和height计算差异,从而导致上图情况发生,解决办法就是在UEditor的css文件中添加该属性,设置为content-box就可以了。

  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值