текстовые поля, значок и метка в одну строку - PullRequest
Новая
       7

текстовые поля, значок и метка в одну строку

0 голосов
/ 25 августа 2018

Я использую реагировать на редуктор office-fabric-ui. Вот мой код: 

<Icon className="delete-transform-icon" iconName="Delete" />
<Dropdown
   className="modal-value-transform-type-dropdown"
   label={translate("transformTypeLabel")}
   placeHolder={this.state.transform.transformType}                     
   ariaLabel={translate("transformTypeLabel")}
/>
 <br />
<TextField
    className="modal-value-transform-type-TextField"
    label={translate("transformDefaultValue")}
    ariaLabel={translate("transformDefaultValue")}
    placeholder={this.state.transform.defaultValue}
 />

в 5 строках. enter image description here

Но я хочу, чтобы они были в одной строке, например: enter image description here Как я могу это сделать?

1 Ответ

0 голосов
/ 25 августа 2018

Я бы порекомендовал удалить br и использовать любой GRID LAYOUT, например, bootstrap , material-ui и т. Д. Управлять элементами в столбцах намного проще.Вы можете сделать что-то вроде этого: 

<div className='row'>
  <div className = 'col-4'></div>
  <div className = 'col-4'></div>
  <div className = 'col-4'></div>
</div>

Это просто базовый пример того, как вы можете использовать всю мощь компоновки сетки.В основном библиотеки пользовательского интерфейса имеют сетку с 12 столбцами на ряд.Я надеюсь, что это будет полезно.

...