Кнопки JS реагируют с css выравниванием друг на друга вместо горизонтального выравнивания

Question

Я работаю над приложением React JS. У меня есть две кнопки, которые я хотел бы иметь равную ширину. Первоначально они выровнены рядом друг с другом. Когда я увеличил размер кнопки с помощью col-sm-8, кнопка отображалась поверх друг друга. Когда я нажал F12, я проверил, что рядом с кнопкой нет полей или отступов, и запутался, почему кнопки вынуждены выравнивать друг друга при увеличении ширины. Места достаточно.

Я попробовал несколько изменений стиля, таких как justify-items: center, align-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

Попробуйте:

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

и удалите отображение: встроенный блок и пробел ...

Answer 2

Вы смешиваете два типа дисплея в CSS display: inline-block и display: flex сосредоточиться только на flex попробуйте это

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

 .my-btn-group {
 flex: 1
 }