• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > Bootstrap.css与layDate日期选择样式起冲突的解决办法

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

作者:谙忆 字体:[增加 减小] 来源:互联网 时间:2017-05-11

谙忆通过本文主要向大家介绍了laydate原生js,laydate,laydate.js,laydate api,laydate.js下载等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

问题如图:

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

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

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

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

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

是加上以下样式:

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

</div>

另外,由于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;
  }
</div>

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

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

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

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

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

inline-size: inherit;
</div>

完整的代码是:

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

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

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

原来的li样式是这样的:

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

 

将此处改为59px即可。

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

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

一:

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

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

二:

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

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

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

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • Bootstrap.css与layDate日期选择样式起冲突的解决办法
  • 原生JS实现圆环拖拽效果
  • 原生JS实现左右箭头选择日期实例代码
  • 原生js仿淘宝网商品放大镜效果
  • 原生js实现可拖拽效果
  • 利用原生JS与jQuery实现数字线性变化的动画
  • 原生JS实现幻灯片
  • 原生js实现放大镜
  • 原生js实现日期计算器功能
  • 原生JS实现简单放大镜效果

相关文章

  • 2017-07-23如何解决每次向后台发起请求时判断用户是否处于登录状态?
  • 2017-05-11JavaScript实现前端实时搜索功能
  • 2017-05-11js获取json中key所对应的value值的简单方法
  • 2017-05-11angularjs中使用ng-bind-html和ng-include的实例
  • 2017-05-11基于JavaScript实现的快速排序算法分析
  • 2017-05-11jQuery实现动态文字搜索功能
  • 2017-05-11js上下视差滚动简单实现代码
  • 2017-05-11JavaScript编写一个贪吃蛇游戏
  • 2017-05-11浅谈js for循环输出i为同一值的问题
  • 2017-05-11jQuery实现多张图片上传预览(不经过后端处理)

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Javascript中类式继承和原型式继承的实现方法和区别之处
    • JavaScript中的子窗口与父窗口的互相调用问题
    • jQuery弹出层插件popShow用法示例
    • JavaScript使用delete删除数组元素用法示例【数组长度不变】
    • JS html时钟制作代码分享
    • javascript 中null和undefined区分和比较
    • Bootstrap缩略图的创建方法
    • webpack独立打包和缓存处理详解
    • js实现鼠标左右移动,图片也跟着移动效果
    • jQuery表格(Table)基本操作实例分析

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有