Bootstrap datetimepicker 样式显示不正确答案

【问题标题】：Bootstrap datetimepicker style not displaying properlyBootstrap datetimepicker 样式显示不正确
【发布时间】：2016-03-11 13:40:37
【问题描述】：

我正在尝试使用 bootstrap-datetimepicker，但无法正确显示。我按照教程的安装部分进行操作。

截图

我的结果：

文档中的示例：

HTML

<div class="form-group">
    <div class="input-group date">
        <label class="input-group-addon" for="add-event-start"><span class=
        "glyphicon glyphicon-calendar"></span></label><input class=
        "form-control" id="add-event-start" name="start" type="text">
    </div>
</div>

Javascript

$('#add-event-start').datetimepicker({
    allowInputToggle: true,
    locale: 'fr',
    icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-arrow-up",
        down: "fa fa-arrow-down",
    },
});

头部

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/fullcalendar.min.css">
<link rel="stylehseet" href="css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>

身体

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/vendor/validator.min.js"></script>
<script src="js/vendor/moment/moment.min.js"></script>
<script src="js/vendor/moment/fr.min.js"></script>
<script src="js/vendor/fullcalendar/fullcalendar.min.js"></script>
<script src="js/vendor/fullcalendar/fr.min.js"></script>
<script src="js/vendor/typeahead.bundle.min.js"></script>
<script src="js/vendor/bootstrap-datetimepicker.min.js"></script>

我试图删除一些包含以防止冲突，但我得到了相同的结果。有人能告诉我我做错了什么吗？

【问题讨论】：

你能创建一个 Fiddle 或类似的东西来帮助我们更快地发现问题。
你在学习哪个教程？
文档中的那个：eonasdan.github.io/bootstrap-datetimepicker/Installing
我不完全知道出了什么问题，因为你没有解释应该看到什么，但在我看来，一切都向左对齐？

标签： javascript css twitter-bootstrap bootstrap-datetimepicker

【解决方案1】：

当我忽略包含或禁用 Bootstrap Datepicker CSS 样式表时，我得到的结果与您的图片相同。（guide的第6步）：

<link rel="stylesheet" href="/path/to/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />

在您的示例代码中，标签似乎出现在您的标题中，但您必须确保它也已加载。可能路径或文件本身有误。

【讨论】：

它包含得很好，我检查了...我还尝试了文档中的样式！
除此之外的其他故障几乎不可能得到完全相同的结果。如果您确实确定包含并正确加载了正确的文件，我想知道它是否具有正确的内容。

【解决方案2】：

我得到完全同样的东西！ :(

但是，如果您使用演示站点中的 bootstrap-datetimepicker.css 和 bootstrap-datetimepicker.js 版本，它可以工作。

演示站点上的版本是 4.15.35，而不是 GitHub 上提供的最新 4.17.37...

【讨论】：