Bootstrap.css與layDate日期選擇樣式起沖突怎么辦

這篇文章主要為大家展示了“Bootstrap.css與layDate日期選擇樣式起沖突怎么辦”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Bootstrap.css與layDate日期選擇樣式起沖突怎么辦”這篇文章吧。

問題如圖:

給大家看下正常的layDate年份選擇圖片:

一開始想到的，以為是自己沒有將layer.css導(dǎo)入，或者layDate.css沒有導(dǎo)入，出現(xiàn)的這個問題，結(jié)果發(fā)現(xiàn)只要導(dǎo)入layer.css，會自動導(dǎo)入layDate.css的，所以問題不在這里。

然后通過火狐瀏覽器去查看樣式，結(jié)果問題出在了BootStrap.css上

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

在網(wǎng)上搜索了一會，發(fā)現(xiàn)很多博客的解決辦法是這樣的：

是加上以下樣式:

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

另外，由于input的樣式不一樣，導(dǎo)致輸入框大小不一致，可以加上下面的樣式兼容：

  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;
  }

經(jīng)過本人的實踐證明，會出現(xiàn)這樣的情況:

年份選擇下拉時，會覆蓋月份選擇。所以這個解決辦法解決了之前的那個問題，但是出來了新的問題，所以拋棄。

換一種思路，為什么不能將ul中的li強(qiáng)制在一行呢，或者說限制一下ul的高度呢，又因為寬度的原因，超過寬度的li自然會去下一行。

所以可以這樣來解決這個問題：

只加了一個樣式，強(qiáng)制li在一行 。

inline-size: inherit;

完整的代碼是:

/*為了解決BootStrap中css和layDate的css樣式?jīng)_突*/
.laydate_body .laydate_y .laydate_yms ul {
  inline-size: inherit;
}

你加入到你的css中就可以解決這個問題了。
貌似這個css樣式還處于實驗期，我測試了一下，在火狐52.0.1 (32 位)是可以的，但是其他的瀏覽器還不支持~

所以這個也讓我拋棄了，最后嘗試了調(diào)整一下li的寬度，結(jié)果成功了。

原來的li樣式是這樣的:

我將這個寬度改成59px，結(jié)果就成功的分成了2列。

將此處改為59px即可。

但是這樣不太好，修改了layDate的源代碼(你如果在其他地方添加li的寬度，無法成功)，我就想，可不可以去修改ul的寬度呢。

結(jié)果又通過調(diào)試發(fā)現(xiàn)了如下兩種解決辦法:

一：

在你的其他的css中添加如下代碼，設(shè)置ul的寬度，至于為什么是120px，這是因為li的寬度是60px。

/*為了解決BootStrap中css和layDate的css樣式?jīng)_突*/
.laydate_body .laydate_y .laydate_yms ul{
  width: 120px;
}

二：

在你的其他的css中添加如下代碼，設(shè)置ul的寬度繼承父類元素的寬度，在這里，ul父類是div，它的寬度是121px。其實也就是相當(dāng)與設(shè)置寬度為121px

/*為了解決BootStrap中css和layDate的css樣式?jīng)_突*/
.laydate_body .laydate_y .laydate_yms ul{
  width: inherit;
}

這兩種解決辦法是我目前實踐的最好的解決辦法了。

以上是“Bootstrap.css與layDate日期選擇樣式起沖突怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！