我在使用这个bootstrap datetimepicker工作时遇到了一些麻烦：
http://eonasdan.github.io/bootstrap-datetimepicker/
我做了一个非常基本的页面，这里是代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<title>Test page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" src="css/bootstrap-datetimepicker.min.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/moment-with-locales.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#datetimepicker1').datetimepicker();
});
</script>
</head>
<body>
<div class='col-sm-2'>
<div class='input-group' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</body>
</html>
现在，它不像插件不起作用，更像是某些样式未正确应用。这是一张更好地说明我的意思的图片。左边是我的，右边是我真正想要的东西：
正如你所看到的，一切都是左对齐而不是居中，事情更窄。此外，当我在日历上运行鼠标并且当前日期没有正确概述时，没有悬停效果。谁能告诉我我做错了什么？
从截图中看，您似乎没有进入bootstrap-datetimepicker.css库。查看您的控制台并确保您没有任何错误，并且该库存在于它正在查找的文件夹中，并具有所有适当的内容。
没有额外的css，它看起来不会很糟糕，因为bootstrap正在完成大部分繁重的工作，而插件通常只是利用Bootstrap的类并添加一些自己的类来装箱。
$(function() {
$('#datetimepicker1').datetimepicker();
});<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<div class='col-xs-4'>
<div class='input-group' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>$(function() {
$('#datetimepicker1').datetimepicker();
});<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<div class='col-xs-4'>
<div class='input-group' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>附： - 调试很困难，因为我们无法知道本地
/js/文件夹中的文件是什么样的。将来，我建议将CDN用于在线样本，以便更容易与其他人分享您正在查看的内容。您可以在此处使用cdnjs获取可分发的静态文件：
谢谢凯尔，你是对的，我没有拉动CSS样式。虽然不是因为我没有把它包括在内......而是我的包含声明中的错误。这就是我所拥有的：
<link rel="stylesheet" src="css/bootstrap-datetimepicker.min.css">
我不小心把'src'而不是'href'，所以这就是我应该放的东西：
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
谢谢你指出我正确的方向:)
我有同样的症状，因为没有加载样式的相同问题。在我的情况下，我的应用程序是一个Rails 5应用程序，在我的application.css文件中，我有
*= require_bootstrap-datetimepicker
代替
*= require bootstrap-datetimepicker
进行修正可以解决这个问题。