Bootgrid刷新按钮不符合尺寸

Question

我正在使用bootstrap和jquery bootgrid，并且一切都先确定。然后我开始了一个新项目并在那里使用了bootgrid。而且我得到一件奇怪的事情：在网格的控制面板上，刷新按钮比其他按钮小。但我没有更改bootgrid中的任何配置，都是默认设置。

为什么它可以和如何解决它？这个按钮是自动生成的，我没有想法......

UPD

JS：

$(function() { 
    var autoOutGrig = $("#autoOutGrig").bootgrid({ 
     navigation: 3, 
     ajax: true, 
     url: "controllers/getListFiles", 
     post: function() { 
      return { 
       type: 'req', 
       expanded: $('#exp').text() 
      }; 
     }, 
     responseHandler: function (response) 
     { 
      return response.data; 
     }   
    }); 

HTML：

<div id="autoOut" class="tab-pane fade in active"> 
    <span id="exp" style="display: none;"></span> 
    <h3>Auto OUT</h3> 
    <table id="autoOutGrig" class="table table-condensed table-hover table-striped"> 
     <thead> 
      <tr> 
       <th data-column-id="date" class="col-md-3">Дата/Время</th> 
       <th data-column-id="expander" data-formatter="expander" class="col-md-1">Список</th> 
       <th data-column-id="file" class="col-md-4">Имя файла</th> 
       <th data-column-id="uid" class="col-md-4">UID</th> 
       <th data-column-id="accReqId" class="col-md-2">AccountsRequestId</th> 
       <!--     <th data-column-id="respType" class="col-md-2">Тип ответа</th> 
            <th data-column-id="respName" class="col-md-2">Имя ответа</th>--> 
      </tr> 
     </thead> 
    </table> 
</div> 

UPD：从镀铬样式检查。

UPD2：从答案下面的代码并不在我的服务器上运行。但它在堆栈snippset上正常工作！

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.css" rel="stylesheet"/> 
 

 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.js"></script> 
 

 

 
<script> 
 
$(function() { 
 
     var testGrid = $("#testGrid").bootgrid({ 
 
     navigation: 3, 
 
     ajax: true, 
 
     url: "controllers/getListFiles", 
 
     post: function() { 
 
      return { 
 
      type: 'req', 
 
      expanded: $('#exp').text() 
 
      }; 
 
     }, 
 
     responseHandler: function (response) 
 
     { 
 
      return response.data; 
 
     } 
 
     }); 
 
    }); 
 
</script> 
 

 

 

 
    <div id="autoOut" class="tab-pane fade in active"> 
 
     <span id="exp" style="display: none;"></span> 
 
     <h3>Auto OUT</h3> 
 
     <table id="testGrid" class="table table-condensed table-hover table-striped"> 
 
     <thead> 
 
      <tr> 
 
      <th data-column-id="date" class="col-md-3">Дата/Время</th> 
 
      <th data-column-id="expander" data-formatter="expander" class="col-md-1">Список</th> 
 
      <th data-column-id="file" class="col-md-4">Имя файла</th> 
 
      <th data-column-id="uid" class="col-md-4">UID</th> 
 
      <th data-column-id="accReqId" class="col-md-2">AccountsRequestId</th> 
 
      </tr> 
 
     </thead> 
 
     </table> 
 
    </div>

Answer 1

我会确保你是在最新的CSS库拉动为您的项目

• https://cdnjs.com/libraries/jquery
• https://cdnjs.com/libraries/twitter-bootstrap
• https://cdnjs.com/libraries/jquery-bootgrid

这似乎是工作与你没关系提供的代码：

$(function() { 
 
    var autoOutGrig = $("#autoOutGrig").bootgrid({ 
 
    navigation: 3, 
 
    ajax: true, 
 
    url: "controllers/getListFiles", 
 
    post: function() { 
 
     return { 
 
     type: 'req', 
 
     expanded: $('#exp').text() 
 
     }; 
 
    }, 
 
    responseHandler: function (response) 
 
    { 
 
     return response.data; 
 
    }   
 
    }); 
 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.js"></script> 
 

 

 
<div id="autoOut" class="tab-pane fade in active"> 
 
    <span id="exp" style="display: none;"></span> 
 
    <h3>Auto OUT</h3> 
 
    <table id="autoOutGrig" class="table table-condensed table-hover table-striped"> 
 
    <thead> 
 
     <tr> 
 
     <th data-column-id="date" class="col-md-3">Дата/Время</th> 
 
     <th data-column-id="expander" data-formatter="expander" class="col-md-1">Список</th> 
 
     <th data-column-id="file" class="col-md-4">Имя файла</th> 
 
     <th data-column-id="uid" class="col-md-4">UID</th> 
 
     <th data-column-id="accReqId" class="col-md-2">AccountsRequestId</th> 
 
     </tr> 
 
    </thead> 
 
    </table> 
 
</div>

Answer 2

There are problems with class name. You have to change class names in "jquery.bootgrid.js" file. So, You can get refresh, search and menu drop down icon. 

变化1：刷新按钮图标。请 “jquery.bootgrid.js” 取代指定代码

actionButton: "<button class=\"btn btn-default\" type=\"button\" title=\"{{ctx.text}}\"><span class=\"icon glyphicon glyphicon-refresh\"></span></button>" 

相反

actionButton: "<button class=\"btn btn-default\" type=\"button\" title=\"{{ctx.text}}\">{{ctx.content}}</button>" 

变化2：对于搜索图标。请替换“jquery.bootgrid”中的给定代码。JS”

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

而不是

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