使用 react-bootstrap-table 在 header 和 table 之间获得 space

Question

我的代码是：

  <Panel>
    <BootstrapTable data={this.state.keys} striped hover condensed>
      <TableHeaderColumn isKey dataField='id' dataAlign='center'>ID</TableHeaderColumn>
      <TableHeaderColumn dataField='key' dataAlign='center'>Key</TableHeaderColumn>
      <TableHeaderColumn dataField='key' dataAlign='center'>&nbsp;</TableHeaderColumn>
    </BootstrapTable>
  </Panel>

虽然看起来是这样的：

Answer 1

你没有列出你使用的是什么版本，所以很难说是什么问题。

首先，我要确保您使用的是最新版本。

但是我在您的代码中发现了几个问题：

1. 您的属性 isKey 没有值。那应该是 isKey={true}
2. 您列出了 dataField=key 两次，但只显示了一列，我想不出为什么会这样（当我尝试在两列中显示相同的数据时）：

您的数据格式应类似于：

var this.state.keys = [{
  id: 1,
  key: 123
}, {
  id: 2,
  key: 3425
}, {
  id: 3,
  key: 98765
}, {
  id: 4,
  key: 56555
}];

这是它与最新版本的 React 和 React 一起正常工作的 Plunker-Bootstrap-Table:
http://plnkr.co/edit/01OFaXq5X1UtZBW1oZzM?p=preview

正如您从 Plunker 中看到的那样，它似乎可以与最新版本一起正常工作。

Answer 2

import 'react-bootstrap-table/css/react-bootstrap-table.css';

这对我有用。