javascript - 如何对 Bootstrap-DateTimePicker 日历小部件进行样式更正？

Question

我已经实现了位于 here 的 Bootstrap-DatTimePicker

我选择了“最小设置”，您可以看到它正常工作 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>

我正在尝试找出如何根据 Bootstrap-DateTimePicker 示例正确显示日历模式的样式以进行最小设置。

有谁知道如何做到这一点？

Answer 1

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