Bootstrap.css与layDate日期选择样式起冲突的解决办法


Posted in Javascript onApril 07, 2017

问题如图:

Bootstrap.css与layDate日期选择样式起冲突的解决办法

给大家看下正常的layDate年份选择图片:

Bootstrap.css与layDate日期选择样式起冲突的解决办法

一开始想到的,以为是自己没有将layer.css导入,或者layDate.css没有导入,出现的这个问题,结果发现只要导入layer.css,会自动导入layDate.css的,所以问题不在这里。

Bootstrap.css与layDate日期选择样式起冲突的解决办法

然后通过火狐浏览器去查看样式,结果问题出在了BootStrap.css上

Bootstrap.css与layDate日期选择样式起冲突的解决办法

* {box-sizing:border-box;}重置了浏览器的盒子模型。

在网上搜索了一会,发现很多博客的解决办法是这样的:

是加上以下样式:

.laydate_box, .laydate_box * {
     box-sizing:content-box;
  }

另外,由于input的样式不一样,导致输入框大小不一致,可以加上下面的样式兼容:

input.laydate-icon,div.laydate-icon{
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  }
  div.laydate-icon{
    text-align: left;
  }

经过本人的实践证明,会出现这样的情况:

Bootstrap.css与layDate日期选择样式起冲突的解决办法

年份选择下拉时,会覆盖月份选择。所以这个解决办法解决了之前的那个问题,但是出来了新的问题,所以抛弃。

换一种思路,为什么不能将ul中的li强制在一行呢,或者说限制一下ul的高度呢,又因为宽度的原因,超过宽度的li自然会去下一行。

所以可以这样来解决这个问题:

Bootstrap.css与layDate日期选择样式起冲突的解决办法

只加了一个样式,强制li在一行 。

inline-size: inherit;

完整的代码是:

/*为了解决BootStrap中css和layDate的css样式冲突*/
.laydate_body .laydate_y .laydate_yms ul {
  inline-size: inherit;
}

你加入到你的css中就可以解决这个问题了。
貌似这个css样式还处于实验期,我测试了一下,在火狐52.0.1 (32 位)是可以的,但是其他的浏览器还不支持~

所以这个也让我抛弃了,最后尝试了调整一下li的宽度,结果成功了。

原来的li样式是这样的:

Bootstrap.css与layDate日期选择样式起冲突的解决办法

我将这个宽度改成59px,结果就成功的分成了2列。

Bootstrap.css与layDate日期选择样式起冲突的解决办法 

将此处改为59px即可。

但是这样不太好,修改了layDate的源代码(你如果在其他地方添加li的宽度,无法成功),我就想,可不可以去修改ul的宽度呢。

结果又通过调试发现了如下两种解决办法:

一:

在你的其他的css中添加如下代码,设置ul的宽度,至于为什么是120px,这是因为li的宽度是60px。

/*为了解决BootStrap中css和layDate的css样式冲突*/
.laydate_body .laydate_y .laydate_yms ul{
  width: 120px;
}

二:

在你的其他的css中添加如下代码,设置ul的宽度继承父类元素的宽度,在这里,ul父类是div,它的宽度是121px。其实也就是相当与设置宽度为121px

/*为了解决BootStrap中css和layDate的css样式冲突*/
.laydate_body .laydate_y .laydate_yms ul{
  width: inherit;
}

这两种解决办法是我目前实践的最好的解决办法了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于javascript滚动图片具体实现
Nov 18 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
JS实现打砖块游戏
Feb 14 Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 #Javascript
JavaScript函数节流的两种写法
Apr 07 #Javascript
原生JS实现圆环拖拽效果
Apr 07 #Javascript
Zepto实现密码的隐藏/显示
Apr 07 #Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 #Javascript
详解JS中遍历语法的比较
Apr 07 #Javascript
JavaScript原生数组Array常用方法
Apr 06 #Javascript
You might like
PHP常用代码
2006/11/23 PHP
php数组去除空值函数分享
2015/02/02 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
基于javaScript的this指向总结
2017/07/22 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python实现各进制转换的总结大全
2017/06/18 Python
目前最全的python的就业方向
2018/06/05 Python
详解Python locals()的陷阱
2019/03/26 Python
提升python处理速度原理及方法实例
2019/12/25 Python
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
幼儿园教师辞职信
2014/01/18 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技