bootstrapTable显示混乱

使用bootstrapTable时,发生了按钮和文字显示混乱的问题。图片说明

在Chrome环境运行,console上没有任何问题。
html页面如下

 <div id="toolbar" class="btn-group" style="margin-top:15px">
            <button id="btn_add" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
            <button id="btn_delete" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
        </div>
        <div><table id="data-table"></table></div>

js页面如下

$('#data-table').bootstrapTable({

         toolbar:"#toolbar",
         striped: true,                      //是否显示行间隔色
         cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
         pagination: true,                   //是否显示分页(*)
         sortable: false,                     //是否启用排序
         sortOrder: "asc",                   //排序方式

         sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
         pageNumber:1,                       //初始化加载第一页,默认第一页
         pageSize: 10,                       //每页的记录行数(*)
         pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
         search: true,                       //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
         strictSearch: true,
         showColumns: true,                  //是否显示所有的列
         showRefresh: true,                  //是否显示刷新按钮
         minimumCountColumns: 1,             //最少允许的列数
         clickToSelect: true,                //是否启用点击选中行
         height: 500,                        //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
         uniqueId: "ID",                     //每一行的唯一标识,一般为主键列
         showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
         cardView: false,                    //是否显示详细视图
         detailView: false,                   //是否显示父子表
         columns: [{
             checkbox: true
         },{
             field: 'id',
             title: 'Item ID'
         }, {
             field: 'name',
             title: 'Item Name'
         }, {
             field: 'price',
             title: 'Item Price'
         }],
         data: [{
             id: 1,
             name: 'Item 1',
             price: '$1'
         }, {
             id: 2,
             name: 'Item 2',
             price: '$2'
         }]

});
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问