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

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

你能不能试试下面的方法：

给row no-gutters mt-auto下面的css规则：

style={{ display: 'flex', flex: 1, flexDirection: 'row' }}

它肯定会起作用！

谢谢