реагировать-бутстраповских-таблицы криво заголовки столбцов

У меня есть следующие:реагировать-бутстраповских-таблицы криво заголовки столбцов

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

У меня такая же проблема, загрузился мой css до того, как bootstrap.css несколько решила мою проблему – NubbyMcNuberson

Да, я втрое проверил это, и это не решение для меня :(Пожелайте, чтобы все было так просто. –

Вы могли решить эту проблему «Я столкнулся с одной и той же проблемой и не нашел ничего полезного для этого решения. –

У меня была такая же проблема, и я выяснил, что я импортировал неправильный файл CSS. Убедитесь, что вы используете один из файлов CSS, перечисленных в here.

Я также использовал table-layout: fixed и задал определенную ширину для каждого компонента TableHeaderColumn.

Не самое идеальное решение, но это единственное, что я нашел, что работает.

источник

2017-03-28 19:16:59

реагировать-бутстраповских-таблицы криво заголовки столбцов

ответ

Смежные вопросы