bootstrapTable：如何垂直对齐细节图标？

Question

我正在使用 bootstrapTable 和运行解决以下问题：

在我的 table 的每一行中显示预览图片，以便行高大于 'normal' 并且其余列中的内容位于顶部。我想垂直对齐这些列中的 text/buttons/checkboxes。通过对列使用选项 align: 'center' 和 valign: 'middle' 可以实现这一点 - 至少对于 'normal' 是这样。它对包含复选框和详细信息图标（'plus'-图标）的列没有影响。

我加了

.bs-checkbox {
    text-align: center !important;
    vertical-align: middle !important;
}

到我的 css 文件并收到所需的结果。但是 detail-icon class 的模拟方式出错了。我在 Whosebug 上发现了类似的问题 - 但答案对我没有帮助。

有没有人想解决我的问题？

举个例子：

var data = [
  {
    "id": 0,
    "name": "Item 0",
    "price": "[=11=]",
    "preview": '<img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" height="50">'
  },
  {
    "id": 1,
    "name": "Item 1",
    "price": "",
    "preview": '<img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" height="50">'
  },
  {
    "id": 2,
    "name": "Item 2",
    "price": "",
    "preview": '<img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" height="50">'
  }
];

$(function () {
  $('#table').bootstrapTable({
      columns: [
        {
          field: 'state',
          checkbox: true,
          align: 'center',
          valign: 'middle'
        }, 
        {
          field: 'id',
          title: 'ID',
          align: 'center',
          valign: 'middle',
          sortable: true
        },
        {
          field: 'name',
          title: 'Name',
          sortable: true,
          align: 'center',
          valign: 'middle',
          editable: {
            type: 'text',
            title: 'Name',
            validate: function (value) {return '';}
          }
        },
        {
          field: 'price',
          title: 'Price',
          align: 'center',
          valign: 'middle',
          editable: {
            type: 'text',
            title: 'Price',
            validate: function (value) {return '';}
          }
        },
        {
          field: 'preview',
          title: 'Preview',
          align: 'center',
          valign: 'middle'
        }
      ],
      data: data
  });
});

.bs-checkbox {
 text-align: center !important;
 vertical-align: middle !important;
}

/* won't work:*/
.detail-icon {
 text-align: center !important;
 vertical-align: middle !important;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<script src="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/extensions/editable/bootstrap-table-editable.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/>
<link href="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>



<div class="container">
 <div id="toolbar">
  <button id="new_btn" class="btn btn-success">
   <i class="glyphicon glyphicon-plus"></i> New
  </button>
  <button id="delete_btn" class="btn btn-danger" disabled>
   <i class="glyphicon glyphicon-trash"></i> Delete
  </button>
 </div>
 <table id="table"
   data-toolbar="#toolbar"
   data-search="true"
   data-show-pagination-switch="true"
   data-detail-view="true"
   data-detail-formatter="detail_formatter"
   data-minimum-count-columns="2"
   data-pagination="true">
 </table>
</div>

Answer 1

您实际上想要在 table 单元格本身而不是单元格中的元素上设置这些属性。

#table td {
    vertical-align: middle;
    text-align: center;
}

这应该可以解决问题。

bootstrapTable：如何垂直对齐细节图标？

bootstrapTable: how to vertical align the detail-icon?

html

css

bootstrap-table