Использование response-select для создания разметки с помощью bootstrap 4

Я новичок в react-redux. Здесь я пытаюсь добиться следующей разметки

введите описание изображения здесь

Итак, вот что я достиг, используя следующий код,

<div className="row">
        <div className="col-md-12">
          <form className="form-inline">
            <div className="form-group col-md-4">
              <lable>Select Technolgoy </lable>
              <Select
                value={selectedOption}
                onChange={this.handleChange}
                options={options}
              />
            </div>
            <div className="form-group col-md-4">
              <lable>Select Component </lable>
              <Select
                value={selectedOption}
                onChange={this.handleChange}
                options={options}
              />
            </div>
            <div className="form-group col-md-4">
              <lable>Select Job </lable>
              <button className="btn btn-primary">
                Add
              </button>
              <button className="btn btn-primary">
                Remove
              </button>
            </div>
          </form>
        </div>
      </div>

введите описание изображения здесь

Итак, здесь я использую react-select.

Что я делаю не так? Кто-нибудь может мне с этим помочь? Спасибо


reactjs javascript css react-select bootstrap-4
person ganesh kaspate    schedule 16.01.2019    source источник
comment
Возможный дубликат Добавление меток в response-select   -  person Nisharg Shah    schedule 16.01.2019
comment
Чего вы хотите здесь добиться? Добавить полный фрагмент   -  person vijayscode    schedule 16.01.2019

Ответы (1)


arrow_upward
0
arrow_downward

Вам необходимо обновить стиль выбранных вами элементов, как в следующих строках:

const styles = {
  container: base => ({
    ...base,
    flex: 1
  })
};

function App() {
  return (
    <div className="row">
      <div className="col-12">
        <form className="form-inline">
          <div className="form-group col-4">
            <lable>Select Technolgoy </lable>
            <Select styles={styles} options={options} />
          </div>
          <div className="form-group col-4">
            <lable>Select Component </lable>
            <Select styles={styles} options={options} />
          </div>
          <div className="form-group col-4 row">
            <lable className="col-4">Select Job </lable>
            <button className="btn btn-primary col-4">Add</button>
            <button className="btn btn-primary col-4">Remove</button>
          </div>
        </form>
      </div>
    </div>
  );
}

Вот живой пример.

person Laura    schedule 17.01.2019
comment
Привет, я использовал этот, но одно дело в том, что как только я перехожу к экрану планшета, он создает ту же проблему, он не принимает ширину - person ganesh kaspate; 17.01.2019
comment
@ganeshkaspate хотите такой же дизайн на планшете? если нет, не могли бы вы привести пример желаемого дизайна? - person Laura; 17.01.2019
comment
Да, я хочу, чтобы на планшете был такой же дизайн. - person ganesh kaspate; 17.01.2019
comment
@ganeshkaspate Я только что обновил код, удаление суффикса -md подойдет для всех типов экранов, а не только для ≥768 пикселей - person Laura; 17.01.2019
comment
Итак, здесь кнопки создают некоторые проблемы, они не находятся в одной строке - person ganesh kaspate; 17.01.2019
comment
@ganeshkaspate Я обновил код, чтобы кнопки были выровнены, но вы должны учитывать, что это может быть не лучшим решением для маленьких экранов, и, вероятно, для этого есть лучший дизайн - person Laura; 17.01.2019