文章/答案/技术大牛

发布

社区首页 >问答首页 >jQuery引导网格呈现问题

问jQuery引导网格呈现问题
EN

Stack Overflow用户

提问于 2019-01-16 21:36:29

回答 1查看 1K关注 0票数 0

我正在尝试在我的一个项目中使用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

html

css

bootstrap-4

jquery-bootgrid

回答 1

Stack Overflow用户

发布于 2022-03-30 06:55:03

这不是你的错!现在有点太晚了，但也许这个答案对其他人有用:我已经解决了这个问题。我下载了上一个引导网格版本(v1.3.1)，并在jquery.bootgrid.js中更改了以下代码

search: "<div class=\"{{css.search}}\"><div class=\"input-group\"><div class=\"input-group-prepend\"><span class=\"{{css.icon}} input-group-text {{css.iconSearch}}\"></span></div><input type=\"text\" class=\"{{css.searchField}}\" placeholder=\"{{lbl.search}}\" /></div></div>",

我在jquery.bootgrid.css中添加了这段代码

ul.pagination li a {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
}
ul.pagination li.active a {
    z-index: 1;
    color: #fff;
    background-color: #2196f3;
    border-color: #2196f3;
}
.btn-default {
    background-color: #f4f4f4;
    color: #444;
    border-color: #ddd;
}

在我的例子中，库可以很好地使用引导4！

最值得尊敬的是，先生。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54225765

复制

相似问题

问jQuery引导网格呈现问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery引导网格呈现问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery引导网格呈现问题
EN