如何在React应用程序中使用Bootstrap使行响应？

Question

每当我缩小尺寸时，当我缩小屏幕时，我的输入类型文本总是会在下方，但是我的 select 会保持在同一行，如何使它变小缩小屏幕在网页中时，“选择状态”和“输入”搜索框文本保持在同一行？

代码

<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>

在调整为较小的屏幕尺寸时，我希望它看起来如何，目前在下面的完整尺寸页面上看起来像这样：

将其调整为下面的较小网页时的外观：

Answer 1

您好像用硬编码宽度值200覆盖了引导CSS

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

尝试删除样式属性。