第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Bootstrap.css與layDate日期選擇樣式起沖突的解決辦法?

Bootstrap.css與layDate日期選擇樣式起沖突的解決辦法?

侃侃爾雅 2018-09-11 18:14:09
Bootstrap.css與layDate日期選擇樣式起沖突的解決辦法
查看完整描述

1 回答

?
臨摹微笑

TA貢獻1982條經(jīng)驗 獲得超2個贊

問題如圖:
 

 

 

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

 

 

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

 

 

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

 

 

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

 

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

 

是加上以下樣式:

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

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

 

 

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

 

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

 

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

 

 

只加了一個樣式,強制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 位)是可以的,但是其他的瀏覽器還不支持~

 

所以這個也讓我拋棄了,最后嘗試了調整一下li的寬度,結果成功了。

 

原來的li樣式是這樣的:
 

 

 

我將這個寬度改成59px,結果就成功的分成了2列。

 

 
 

 

將此處改為59px即可。

 

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

 

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

 

一:
 

 

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

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

二:
 

 

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

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

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


查看完整回答
反對 回復 2018-09-24
  • 1 回答
  • 0 關注
  • 1007 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號