reactjs - 如何在反应应用程序中使用引导程序使行响应？

Question

每当我缩小尺寸时，我的输入类型文本在缩小屏幕时总是低于但我的选择保持在同一行，如何制作它以便选择状态和我的输入搜索框文本在制作时保持在同一行我的屏幕在网页中变小了？

代码

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

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

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

标签： reactjsbootstrap-4react-bootstrap

Answer 1

看起来您正在用硬编码的宽度值 200 覆盖引导 css

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

尝试删除样式属性。