Question

我正在尝试在我的项目中使用Bootgrid，并且希望它与http://www.jquery-bootgrid.com/Examples#data-api中的示例完全相同：

但是，当我编写自己的实现时，其呈现方式却有所不同，如下所示：

请注意搜索图标未对齐，并且每个按钮（搜索，刷新，每页项目，列选择器和页面）都没有边框。

这是源HTML：

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>Test</title>

    <meta http-equiv="content-type"
          content="text/html;charset=UTF-8" />

    <meta http-equiv="X-UA-Compatible"
          content="ie=edge">

    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"
            integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP"
            crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"
            integrity="sha256-S952WuaxC9XbI06xeWuSuSuvTewXEQQOU2OYBe7kdIs="
            crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.fa.min.js" 
            integrity="sha256-u/DZtNLWZSvkNdIL4PTQzEJUAFLzM758asxZnhd+5R4=" 
            crossorigin="anonymous"></script>

    <link rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
          integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
          crossorigin="anonymous">

    <link rel="stylesheet" 
          href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" 
          integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" 
          crossorigin="anonymous">

    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.css"
          integrity="sha256-i397iDijTcJqMf2j733J1b+WKakC2U8Y3k2eMScEugA="
          crossorigin="anonymous" />

</head>
<body>
    <div class="responsiveTable m-5">
        <table id="grid-tarefas"
               class="table table-condensed table-hover table-striped bootgrid-table"
               data-toggle="bootgrid"
               data-ajax="true"
               data-url="grid.php">
            <thead>
                <tr>
                    <th data-column-id="id" data-type="numeric" data-identifier="true">ID</th>
                    <th data-column-id="sender">Sender</th>
                    <th data-column-id="received" data-order="desc">Received</th>
                </tr>
            </thead>
        </table>
    </div>
    <script>
        $(
            function (evt) {
                $("#grid-tarefas").bootgrid("reload");
            }
        );
    </script>
</body>
</html>

两者都是在同一浏览器（Firefox 64.0.2 64位，Windows 10）中呈现的。

我想知道我在这里做错了什么...我的JS和CSS引用正确吗？缺少什么吗？

jQuery Bootgrid渲染问题

0 个答案: