react-bootstrap-table双头

时间:2015-12-02 20:14:52

标签: twitter-bootstrap reactjs react-bootstrap

使用if defined?(ActiveAdmin) ActiveAdmin.register Myengine::Myeresource do controller do def permitted_params params[:myengine_myresource] = params.delete :myresource params.permit(myengine_myresource: [:my, :list, :of, :accepted, :params]) end end end end ,我创建了一个表格如下:

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> 的{​​{1}}内:

enter image description here

我做错了什么?最奇怪的部分是顶部的标题可以工作,但实际附加到表格的标题没有任何作用。

编辑:重新导入css后的表格 在我的Tab我现在有:     

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

enter image description here

我也尝试了react-bootstrap文件,但结果相同。

更新 使用其中一个标头执行排序可修复对齐问题。但是为什么要从一开始就打破它?

1 个答案:

答案 0 :(得分:5)

来自GitHub Issues

  

您需要重新导入css文件:)

您可以在此codepen中看到这一点。如果从设置菜单中删除了boostrap-table css文件,则会出现此问题。

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