我尝试将JqGrid插件与Bootstrap CSS一起使用，即使我的页面具有相同的样式表链接，CSS也不适用。我搜索SOF中的许多其他问题，但它们都已过时，所以这对我没有帮助:(这是我的网格的屏幕，你可以看到，我们远离JqGrid与Bootstrap的美丽:(：< / p>
这是我的HTML和JS代码以获得一些帮助：
$。jgrid.defaults.responsive = true;
$ .jgrid.defaults.styleUI ='Bootstrap';
$("#jqGrid").jqGrid({
url: 'data.json',
datatype: "json",
jsonReader : {
root:"datas"
},
colModel: [
{ label: 'Category Name', name: 'CategoryName', width: 75 },
{ label: 'Product Name', name: 'ProductName', width: 90 },
{ label: 'Country', name: 'Country', width: 100 },
{ label: 'Price', name: 'Price', width: 80, sorttype: 'integer' },
// sorttype is used only if the data is loaded locally or loadonce is set to true
{ label: 'Quantity', name: 'Quantity', width: 80, sorttype: 'number' }
],
viewrecords: true, // show the current page, data rang and total records on the toolbar
autowidth: true,
height: 400,
rowNum: 30,
loadonce: true, // this is just for the demo
pager: "#jqGridPager"
});
<head> <title>Espace Privé</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"> <link rel="stylesheet" href="/Plugin/JqGrid/css/trirand/ui.jqgrid-bootstrap.css"> <link rel="stylesheet" href="/Plugin/SlideBar/dev/slidebars.css"> <link rel="stylesheet" href="/Plugin/jNotify/css/jnotify.css"> <link rel="stylesheet" href="/Plugin/Popr/popr.css"> <link rel="stylesheet" href="/Plugin/Wizard/prettify.css"> <link rel="stylesheet" href="/Plugin/jAlert/src/jAlert-v3.css"> <link rel="stylesheet" href="/stylesheets/style.css"> </head>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-fr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script>
<script src="/Plugin/SlideBar/dist/slidebars.js"></script>
<script src="/Plugin/jNotify/lib/jquery.jnotify.js"></script>
<script src="/Plugin/Wizard/jquery.bootstrap.wizard.js"></script>
<script src="/Plugin/Wizard/prettify.js"></script>
<script src="/Plugin/jAlert/src/jAlert-v3.js"></script>
<script src="/Plugin/jAlert/src/jAlert-functions.js"></script>
<script src="/Plugin/Popr/popr.js"></script>
<script src="/javascripts/layout.js"></script>
<script src="/javascripts/entitees.js"></script>