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 (
      
        
          
            
              

            
            
              
            
            
              
            
            
              
            
          
        
      
    );
  }
});

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 (
      
        {'Interval'}
        {'Status'}
        {'Started'}
        {'Completed'}
        {'RT'}
        {'Attempts'}
        {'PID'}
        {'ID'}
      
    );
  }
});

这是所有看起来像:

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