反應的自舉表失準頭列

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

反應的自舉表失準頭列

回答

相關問題