為什么 boostrap 小部件不顯示？

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 鏈接

您應該仔細檢查 css 文件是否在正確的位置。

如果是，那么您可以在這里嘗試一些解決方案

1. 嘗試刪除rel="stylesheet"屬性並在鏈接標簽中添加type="text/html" 。

2. 如果第一個解決方案不起作用，那么您可以嘗試保留rel="stylesheet"並另外添加type="text/css"

3. 如果上述兩個解決方案都不起作用，那么您嘗試在link標簽之前添加<base href="/">