react-bootstrap-table标题栏未对齐 [英] react-bootstrap-table misaligned header columns
本文介绍了react-bootstrap-table标题栏未对齐的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下内容:
Node.jsx
import React from 'react';
import {Col, Row, Tab, Tabs} from 'react-bootstrap';
import Alerts from './Alerts';
import Details from './Details';
import Family from './Family';
import Instances from './Instances';
module.exports = React.createClass({
displayName: 'Node',
render () {
return (
<Row>
<Col md={12}>
<Tabs defaultActiveKey={1}>
<Tab eventKey={1} title={'Details'}>
<Details />
</Tab>
<Tab eventKey={2} title={'Alerts'}>
<Alerts />
</Tab>
<Tab eventKey={3} title={'Family'}>
<Family />
</Tab>
<Tab eventKey={4} title={'Instances'}>
<Instances instances={this.props.nodeInstances}/>
</Tab>
</Tabs>
</Col>
</Row>
);
}
});
Instances.jsx
import React from 'react';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
module.exports = React.createClass({
displayName: 'NodeInstances',
getDefaultProps () {
return {
selectRowOpts: {
mode: "radio",
clickToSelect: true,
hideSelectColumn: true,
bgColor: "rgb(238, 193, 213)",
onSelect: (row, isSelected) => { console.log(row, isSelected); }
}
};
},
render () {
var props = this.props;
return (
<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>
);
}
});
这是所有的样子:
为什么表的标题列未对齐?此外,当我选择标题之一对表进行排序时,或者当我选择表中的行之一时,列将与标题正确对齐.我错过了什么吗?
Why are the header columns for the table misaligned? Further, when I select one of the headers to sort the table, or when I select one of the rows in the table, the columns become properly aligned with the headers. Did I miss something?
推荐答案
我遇到了同样的问题.app.js中下面的导入解决了我的问题
I had same issue . This below import in the app.js solved my problem
import 'react-bootstrap-table/dist/react-bootstrap-table.min.css';
这篇关于react-bootstrap-table标题栏未对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文