为什么 Bootstrap 的下拉切换在某些环境中有效，而在其他环境中无效？

Question

我完全不明白为什么 Bootstrap table 底部的页面大小 ("Showing 10 records per page") 下拉菜单在某些环境下有效，但在其他环境下无效。我想创建一个 Bootstrap Table with the pagination feature just like this. When I previewed the code through Sublime Text or Brackets(Adobe's text editor), the dropdown menu was not functional. When I inserted my code to my Squarespace blog at the bottom of the page, it did not work either. However, when I inserted the code to JSFiddle or my Webflow site，它成功了。什么可能导致冲突？我是编程新手，如果您能给我一些解决问题的提示，我将不胜感激！

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<table data-toggle = "table" data-pagination = "true" data-pagination = "true" data-page-list="[10, 20, 50, 100, 200]">
    <thead>
        <tr>
            <th data-sortable="true">Symbol</th>
            <th data-sortable="true">Company Name</th>
            <th data-sortable="true">EV/EBITDA</th>
            <th data-sortable="true">Trailing P/E</th>
            <th data-sortable="true">Forward Dividend Yield</th>
            <th data-sortable="true">Payout Ratio</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>FLWS</td>
            <td>1-800 FLOWERS.COM, Inc.</td>
            <td>9.18</td>
            <td>28.33</td>
            <td>N/A</td>
            <td>N/A</td>
        </tr>
        ...
    </tbody>
</table>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.js"></script>

Answer 1

jQuery 需要在 Bootstrap 的 JS 文件之前加载：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.js"></script>

它适用于 jsFiddle，因为它们生成正确排序库的标记。如果您在 Stack Snippet 中以相同的顺序加载您的库，您会在此站点上看到相同的行为。

值得注意的是，这是在 Bootstrap's site:

上明确调用的

Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).

为什么 Bootstrap 的下拉切换在某些环境中有效，而在其他环境中无效？

Why Does Bootstrap's Dropdown Toggle Work in Some Environments But Not the Others?

javascript

css

jquery

twitter-bootstrap

bootstrap-table