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 相关文章推荐
js正确获取元素样式详解
Aug 07 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
js表头排序实现方法
Jan 16 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 Javascript
JS处理一些简单计算题
Feb 24 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 Javascript
vue组件vue-esign实现电子签名
Apr 21 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 魔术方法使用说明
2009/10/20 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
字符串的replace方法应用浅析
2011/12/06 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
python实现简单遗传算法
2018/03/19 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
Python分类测试代码实例汇总
2020/07/23 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
向领导表决心的话
2014/03/11 职场文书
人力资源求职信
2014/05/25 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
生产助理岗位职责
2014/06/18 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
python xlwt模块的使用解析
2021/04/13 Python
python实现简单的井字棋
2021/05/26 Python
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
一文简单了解MySQL前缀索引
2022/04/03 MySQL