为什么引导小部件不显示？

Question

我正在尝试使用 boostrap 在我的网站中实现一个日期选择器。没用过，不明白老是报错。

.html 文件：

<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" href="stylesheets/sidebar.css">
<link rel="stylesheet" href="stylesheets/taskboard.css">

<script src="javascripts/taskboard.js"> </script>
<script type="text/javascript" src="/bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/bower_components/moment/min/moment.min.js"></script>
<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script> 
.
.
.
<div style="overflow:hidden; z-index:100;">
          <div class="form-group">
            <div class="row">
              <div class="col-md-8">
                <div id="datetimepicker12"></div>
              </div>
            </div>
          </div>
          <script type="text/javascript">
            $(function () {
            $('#datetimepicker12').datetimepicker({
                inline: true,
                sideBySide: true
              });
            });
          </script>
        </div>
      </div>

当我加载网站时没有任何显示，它保持为空，并且我收到一条控制台消息：

Answer 1

您的代码与cdn 完美配合

这里是JSFIDDLE link

您应该仔细检查 css 文件是否在正确的位置。

如果是，那么您可以在这里尝试一些解决方案

1. 尝试删除rel="stylesheet" 属性并在链接标记中添加type="text/html"。

2. 如果第一个解决方案不起作用，那么您可以尝试保留 rel="stylesheet" 并另外添加 type="text/css"

3. 如果上述两种解决方案都不起作用，那么您尝试在 link 标签之前添加 <base href="/">