Question

我正在尝试使三个按钮使用列的整个宽度。

按钮的网格为3，其他组件的网格为9。

这里是visual。所以基本上按钮也应该占据用红色标记的空间，它们应该只使用3的整列。

这是我导入组件的App.js：

<div className="container-full padding-0" style={{overflow:'hidden', overflowY:'hidden'}}>
    <div className="row">
        <div className="col-sm-3" style={{borderRight:"1px solid #000"}}>
            <div className="row no-gutters mt-auto">
                <div className="col-sm-3">
                    <COMPONENT1/>
                </div>
                <div className="col-sm-9">
                    <COMPONENT2/>
                </div>
            </div>
            <COMPONENT3 store={store} style={{overflow:'hidden'}}/>
            <COMPONENT4/>
            <BUTTONS/> --------------------------> Here are the buttons
       </div>
       <div className="col-sm-9" style={{paddingRight: 0, paddingLeft: 0}}>
            <COMPONENT6 = {store} style={{overflow:'hidden'}}/>
            <br/>
            <COMPONENT7/>
            <COMPONENT8 store={store} clicked={this.clicked}/>
       </div>
    </div>
</div>

按钮组件：

<div className="row no-gutters mt-auto" style={{paddingTop:10}}>
    <div className="col-sm-4">
        <Button variant="raised" style={buttonStyle}>A</Button>
    </div>

    <div className="col-sm-4">
        <Button variant="raised" style={buttonStyle}>B</Button>   
    </div>

    <div className="col-sm-4">
        <Button variant="raised" style={buttonStyle}>C</Button>
    </div>
</div>

按钮的css：

const buttonStyle = {
    fontSize: 20,
    textAlign: 'center',
    display:'inline-block',
    width:'100%',
    height:100
}

编辑：此处快速pic用户界面

Answer 1

请尝试以下方法：

将以下css规则提供给gridOptions.getDataPath(data)：

Enterperise.getRows

它肯定会起作用！

由于

<div>没有使用完整的bootstrap列空间

1 个答案: