Bootstrap网格系统无法正常工作

Question

以下是我的代码，使用react和bootstrap。

export class PageConfiguration extends React.Component {
    constructor(){
        super();
        this.state = {
            data: []
        };
    }
    //ajax call that gets the Page Configuration Data
    componentDidMount() {
        $.ajax({
            url: "https://dev-dsk-singhdig-2a-f8baf256.us-west-2.amazon.com:2301/goa/management/portalData",
            type: "GET",
            dataType: 'json',
            ContentType: 'application/json',
            success: function(data) {
                this.setState({data: data});
                JSON.stringify(this.state.data);
            }.bind(this),
            error: function(errCode) {
                console.log("error: " + errCode);
            }.bind(this)
        })
    }
    //method that renders Page Configuration Data table
    render(){
        var jsonData = this.state.data;
        var tdStyle = {
            padding: "0px",
            margin: "0px",
            width: "100%",
            border: "0px",
            borderTop: "1px solid #ddd"
        };
        return(
            <div>
                <table className="table table-fixed">
                    <thead>
                        <tr className="bg-primary row">
                            <th className="col-md-2">#</th>
                            <th key="head" className="col-md-5">Page Name</th>
                            <th className="col-md-5">Page Uri</th>
                        </tr>
                    </thead>
                    <tbody>
                    {
                        jsonData.map((row, key) => {
                        return ([
                            <tr key={key} data-toggle="collapse" data-target={"#rowPC"+key} className="accordion-toggle table-hover row"  onClick={()=>this.showPCTable(row,key)}>
                                <td className="col-md-2">{key+1}</td>
                                <td className="col-md-5">{row.pageName}</td>
                                <td className="col-md-5">{row.pageUri}</td>
                            </tr>,
                            <tr className = "row">
                                <td className="col-md-2" style={tdStyle}></td>
                                <td className="hiddenRow col-md-8" style={tdStyle}>
                                    <div id={"rowPC"+key} className="accordian-body collapse">
                                    </div>
                                </td>
                                <td className="col-md-2" style={tdStyle}></td>
                            </tr>
                        ])
                    })}
                    </tbody>
                </table>
            </div>
        );
    }
    showPCTable(row,hash) {
        var table = React.cloneElement(<PageConfigDataExpand row={row} hash={hash}></PageConfigDataExpand>);
        ReactDOM.render(table, document.getElementById("rowPC"+hash));
    }
}
//Class that renders the Page Configuration data.
export class PageConfigDataExpand extends React.Component {
    render() {
        var row = this.props.row;
        var liStyle = {
            background: "#e0f7fa"
        };
        var assets="";
        {
            row.assets == null ? ( assets = "null" ) :
            (
                row.assets.map((tableItem,i) => {
                    if(assets!="") {
                        assets = assets.concat(", ");
                    }
                    assets = assets.concat(tableItem.assetId)
                })
            )
        }
        if(assets == "")
            assets = "null";
        return (
            <ul className="list-group">
                <li className="list-group-item list-group-item-info" style={liStyle}><strong>Page Name: </strong><span className="text-right">{row.pageName}</span></li>
                <li className="list-group-item list-group-item-info" style={liStyle}><strong>Page Uri: </strong><span className="text-right">{row.pageUri}</span></li>
                <li className="list-group-item list-group-item-info" style={liStyle}><strong>Page Type: </strong><span className="text-right">{row.pageType}</span></li>
                <li className="list-group-item list-group-item-info" style={liStyle}><strong>Sub Page Type: </strong><span className="text-right">{row.subPageType}</span></li>
                <li className="list-group-item list-group-item-info" style={liStyle}><strong>Page Rights: </strong><span className="text-right">{row.pageLevelRight}</span></li>
                <li className="list-group-item list-group-item-info" style={liStyle}><strong>Title Widget: </strong>
                    {row.titleWidget == null ? "null" : row.titleWidget.widgetId }
                </li>
                <li className="list-group-item list-group-item-info" style={liStyle}><strong>Layout Used: </strong><span className="text-right">{row.layout.layout.layoutId}</span></li>
                <li className="list-group-item list-group-item-info" style={liStyle}><strong>Assets Used: </strong><span className="text-right">{assets}</span></li>
            </ul>
        );
    }
}

因此，在每一行表格下面都有一个隐藏的行，点击后会打开。 我希望指定两行不同的宽度。 我正在尝试更改列的宽度，但这不起作用。

无法找到原因或任何解决方案。 寻求一些帮助。

编辑：基本上我正在寻找colgroup的等效反应 我想创建具有不同宽度的列的行。