Как сделать строку адаптивной с помощью начальной загрузки в реагирующем приложении? - PullRequest
Новая
       14

Как сделать строку адаптивной с помощью начальной загрузки в реагирующем приложении?

0 голосов
/ 10 декабря 2018

Всякий раз, когда я уменьшаю размер, мой текст ввода типа всегда уменьшается при уменьшении экрана, но мой выбор остается в той же строке, как сделать так, чтобытекст «Выбрать состояние» и текст в поле «Мой поиск» остаются в одной строке при уменьшении размера моего экрана на веб-странице?

КОД 

<div className="row">
          <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 


                  <FormGroup bsSize="large" onChange={this.onChangeSummary.bind(this)} >

                      <div className="selectStatus"> 
                       <div className='col-xs-2 col-md-2 col-lg-2 clearfix' style={{width: 200}}>
                        <Select
                                value={{label: this.state.statusColor}}
                                onChange={this.handleChange}
                                options={optionsStatus}
                                styles={colourStylesLiveOn}



                         /> 
                      </div>
                     </div>
                       <div className='col-xs-10 col-md-10 col-lg-10 clearfix' style={{maxWidth: 1700}}>
                         <FormControl style={{maxWidth:1700}} defaultValue={this.state.summaryLiveOn} onBlur={this.onChangeSummary.bind(this)} type="text" placeholder="Summary information" spellcheck="false"/>
                       </div>
                    </FormGroup>

                  </div>

</div>

Как я хочуэто выглядит при изменении размера экрана на меньший, в настоящее время это выглядит на полноразмерной странице ниже: enter image description here

Как это выглядит, когда этоизменен на меньшую веб-страницу ниже: enter image description here

1 Ответ

0 голосов
/ 10 декабря 2018

Похоже, вы перезаписываете загрузочную версию CSS с жестко заданным значением ширины 200

<div className='col-xs-2 col-md-2 col-lg-2 clearfix' style={{width: 200}}>

Попробуйте удалить свойство стиля.

...