React JS 按鈕與 css 相互對齊而不是水平對齊

Question

我正在開發 React JS 應用程序。 我有兩個按鈕，我希望它們的寬度相等。 最初，它們彼此相鄰對齊。 當我使用 col-sm-8 增加按鈕大小時，按鈕被呈現在彼此之上。 當我按下 F12 時，我檢查了按鈕旁邊是否沒有邊距或填充，並困惑為什么當寬度增加時按鈕被迫相互對齊。 有足夠的空間。

我嘗試了一些樣式更改，例如 justify-items: center、aligned-items: center 但到目前為止沒有任何效果。

這是我的代碼

<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

您在 CSS display: 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;
}

並刪除 display:inline-block 和 white-space ...