問題如圖:
給大家看下正常的layDate年份選擇圖片:
一開始想到的，以為是自己沒有將layer.css導入，或者layDate.css沒有導入，出現的這個問題，結果發現只要導入layer.css，會自動導入layDate.css的，所以問題不在這里。
然后通過火狐瀏覽器去查看樣式，結果問題出在了BootStrap.css上
* {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; }經過本人的實踐證明，會出現這樣的情況:
年份選擇下拉時，會覆蓋月份選擇。所以這個解決辦法解決了之前的那個問題，但是出來了新的問題，所以拋棄。
換一種思路，為什么不能將ul中的li強制在一行呢，或者說限制一下ul的高度呢，又因為寬度的原因，超過寬度的li自然會去下一行。
所以可以這樣來解決這個問題：
只加了一個樣式，強制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樣式是這樣的:
我將這個寬度改成59px，結果就成功的分成了2列。
將此處改為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;}這兩種解決辦法是我目前實踐的最好的解決辦法了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
