反应的自举表失准头列

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> 
    ); 
    } 
});

这里是什么都看起来如：

为什么表格的标题列未对齐？此外，当我选择其中一个标题对表格进行排序时，或者当我选择表格中的一行时，这些列将与标题正确对齐。我错过了什么？

来源

2015-12-02 Matthew Herbst

我得到同样的问题，在bootstrap.css之前加载我的css有点解决我的问题 – NubbyMcNuberson

是的，我检查了三倍，它并没有为我解决:(希望是这么简单， –

你是否能够解决这个问题？我面临完全相同的问题，找不到任何有用的解决方案。 –

我遇到了同样的问题，最后发现我导入了错误的CSS文件。确保您使用here中列出的其中一个CSS文件。

我还使用了table-layout: fixed并在每个TableHeaderColumn组件上设置了一个特定的宽度。

不是最理想的解决方案，但它是我发现的唯一工作。

来源

2017-03-28 19:16:59

反应的自举表失准头列

回答

相关问题