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 相关文章推荐
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
小程序实现五星点评效果
Nov 03 Javascript
js微信分享接口调用详解
Jul 23 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 Javascript
Vue实现简单计算器
Jan 20 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 DataGrid 实现代码
2009/08/12 PHP
PHP生成Flash动画的实现代码
2010/03/12 PHP
PHP的autoload自动加载机制使用说明
2010/12/28 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
laravel自定义分页效果
2017/07/23 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
理解Python垃圾回收机制
2016/02/12 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
高中毕业生自我鉴定范文
2013/09/26 职场文书
公务员职务工作的自我评价
2013/11/01 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
经典团队口号
2014/06/06 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
2014年小学工作总结
2014/11/26 职场文书