如何对Bootstrap-DateTimePicker日历Widget进行样式更正？

Question

我已经实现了位于这里的引导-数据定时选择器

我选择了“最小设置”，您可以看到该设置可以正常工作这里。

但是，我的实现没有使用正确的日历样式显示。您可以在此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>

我试图弄清楚如何正确地显示日历模式的样式，如Bootstrap-DateTimePicker示例中的最低设置。

有人知道如何做到这一点吗？

Answer 1

如果您还没有在浏览器中使用Web检查工具，我强烈建议您这样做。只需导航到元素并查看放置在其上的样式属性即可。然后，您可以添加自己的代码来覆盖那些导致与您自己的内联CSS或CSS文件冲突的内容。