twitter-bootstrap - React-bootstrap-table 双 header

Question

使用react-bootstrap-table，我创建了一个表，如下所示:

<BootstrapTable data={props.instances} hover condensed selectRow={props.selectRowOpts}>
  <TableHeaderColumn dataField={'interval_value'} dataSort>{'Interval'}</TableHeaderColumn>
  <TableHeaderColumn dataField={'status_name'} dataSort>{'Status'}</TableHeaderColumn>
  <TableHeaderColumn dataField={'started_ts'} dataSort>{'Started'}</TableHeaderColumn>
  <TableHeaderColumn dataField={'completed_ts'} dataSort>{'Completed'}</TableHeaderColumn>
  <TableHeaderColumn dataField={'last_runtime'} dataSort>{'RT'}</TableHeaderColumn>
  <TableHeaderColumn dataField={'attempts'} dataSort>{'Attempts'}</TableHeaderColumn>
  <TableHeaderColumn dataField={'pid'} dataSort>{'PID'}</TableHeaderColumn>
  <TableHeaderColumn dataField={'node_instance_id'} dataSort isKey>{'ID'}</TableHeaderColumn>
</BootstrapTable>

但是，这给了我一些有趣的结果。这就是表格对我来说的样子(表格位于 react-bootstrap 的 Tab 内:

我做错了什么？最奇怪的部分是顶部的标题起作用，但实际上附加到表格的标题没有任何作用。

编辑:重新导入 CSS 后的表格在我的 index.html 中，我现在有:

但是，虽然这解决了双标题问题，但它仍然存在标题列未对齐的问题。该表现在看起来像这样:

我还尝试了 react-bootstrap-table-all.min.css 文件，但得到了相同的结果。

更新:使用其中一个 header 执行排序可修复对齐问题。但为什么它一开始就会被破坏呢？

Answer 1

来自他们的GitHub Issues

You need re-import the css file :)

您可以在 codepen 中看到它的工作原理。如果您从设置菜单中删除 boostrap-table css 文件，就会出现此问题。

https://rawgit.com/AllenFang/react-bootstrap-table/master/css/react-bootstrap-table.min.css