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

时间:2018-12-10 14:45:27

标签: reactjs bootstrap-4 react-bootstrap

每当我缩小尺寸时,当我缩小屏幕时,我的输入类型文本总是会在下方,但是我的 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>

在调整为较小的屏幕尺寸时,我希望它看起来如何,目前在下面的完整尺寸页面上看起来像这样: enter image description here

将其调整为下面的较小网页时的外观: enter image description here

1 个答案:

答案 0 :(得分:2)

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

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

尝试删除样式属性。