使用react-bootstrap-table在头和表之间获取空格

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-Bootstrap-Table正确工作的Plunker：
http://plnkr.co/edit/01OFaXq5X1UtZBW1oZzM?p=preview

从Plunker可以看出，它似乎与最新版本一起正常工作。

Answer 2

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

这对我有用。