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中的delete使用详解
Apr 11 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
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制作简单的内容采集器的代码
2007/11/28 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
javascript 关闭IE6、IE7
2009/06/01 Javascript
js setattribute批量设置css样式
2009/11/26 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
js数据类型检测总结
2018/08/05 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
vue按需加载实例详解
2019/09/06 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
web.py在模板中输出美元符号的方法
2014/08/26 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
Python读写docx文件的方法
2018/05/08 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
使用Python函数进行模块化的实现
2019/11/15 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
试用期转正鉴定评语
2014/01/27 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
影子教师研修方案
2014/06/14 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js