如何對Bootstrap-DateTimePicker日曆小工具進行樣式更正？

我已經實現了自舉DatTimePicker位於here 如何對Bootstrap-DateTimePicker日曆小工具進行樣式更正？

我選擇「最小安裝」，你可以看到正確here

工作然而，我的實現不與正確的日曆造型顯示。你可以看到這個日曆顯示錯誤JsFiddle

如果你仔細看看我的實現，點擊圖標日曆下拉菜單時，日曆有一個邊界表顯示並且溢出模式的邊緣向右。

起初我以爲我並沒有包括所有正確的依賴關係，但是在進行雙重檢查並確保我已經將它們全部正確列出之後，它仍然沒有任何效果。

這裏是依賴我：

<!-- Bootstrap & Core CSS (DPL) --> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> 
<link rel="import" href="https://cdn.rawgit.com/zerodevx/zero-md/v0.2.0/build/zero-md.html"> 
<link rel="stylesheet" href="https://cdn.rawgit.com/zerodevx/zero-md/v0.2.0/markdown-themes/default.css"> 
<link rel="stylesheet" href="https://cdn.rawgit.com/zerodevx/zero-md/v0.2.0/highlight-themes/default.css"> 

<link rel="stylesheet" href="/orion/ccdd.css"> 

<!-- Bootstrap, Custom, & Core jQuery Plugins DPL --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.12.4.min.js"></script> <!-- NEW *** Maybe Autocomplete???--> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> 
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> <!-- NEW --> 
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script> <!-- NEW --> 
<script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.15/webcomponents-lite.min.js"></script>

我試圖找出如何正確顯示日曆模式按照引導程序，例如的DateTimePicker的樣式最少的設置。

有誰知道如何做到這一點？

來源

2017-07-27 lopezdp

從小提琴中移除您的自定義CSS（或與桌面，tbody，td，tr樣式相關的所有內容），並且日曆看起來不錯。您的CSS和DateTimePicker CSS之間存在衝突。你應該試着更加專注於你的類選擇器，以避免這種衝突。 –

謝謝，我會嘗試。 – lopezdp

請確保在您的自定義CSS中，您不會覆蓋由datetimepicker – dariogriffo

如果您還沒有在您的瀏覽器中使用Web Inspector工具，我強烈建議您使用它。只需導航到元素並查看放置在其上的樣式屬性。然後，您可以添加自己的文件來覆蓋與自己的內嵌CSS或CSS文件發生衝突的文件。

來源

2017-07-27 16:25:34 JamesSkinner12

如何對Bootstrap-DateTimePicker日曆小工具進行樣式更正？

回答

相關問題