Question

为什么我的Bootstrap表底部的页面大小下拉菜单（＆＃34;每页显示10条记录＆＃34;）在某些环境中工作但不在其他环境中工作，我感到非常困惑。我想创建一个具有分页功能的Bootstrap Table，就像this一样。当我通过Sublime Text或Brackets（Adobe的文本编辑器）预览代码时，下拉菜单不起作用。当我将代码插入页面底部的my Squarespace blog时，它也无效。但是，当我将代码插入JSFiddle或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

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

<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明确地提到了这一点：

另请注意，所有插件都依赖于jQuery（这意味着jQuery必须是包含之前插件文件）。

为什么Bootstrap的Dropdown切换工作在某些环境中而不是其他环境？

1 个答案: