使用css的React JS按钮相互对齐，而不是水平对齐

Question

我正在开发React JS应用程序。我有两个按钮，我想宽度相等。最初，它们并排排列。当我用col-sm-8增加按钮大小时，按钮被渲染为一个在另一个之上。当我按下F12时，我检查了按钮旁边是否没有边距或填充，并弄不清楚为什么当宽度增加时，按钮会被迫在顶部对齐。有足够的空间。

我尝试了一些样式更改，比如对齐项目：居中，对齐项目：中间，但到目前为止都不起作用。

这是我的代码

<div className={'my-toolbar'}>
<div className={''my-btn-group}
<button className={'col-sm-8'}>{'AAAAAAAA'}</button>
<button className={'col-sm-8'}>{'BBBBBBBB'}</button>
</div>
</div>
css
.my-toolbar {
display: flex;
aligned-items: center;
font-size; 16px
}
.my-btn-group {
display: inline-block
white-space: nowrap
}

Answer 1

您在CSSdisplay: inline-block和display: flex中混合了两种类型的显示
只专注于flex尝试此

.my-toolbar {
display: flex;
align-items: center;
font-size; 16px
}
.my-btn-group {
flex: 1
}

Answer 2

试试这个：

.my-btn-group{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
}

并删除显示：内联块和空白。。。