每当我缩小尺寸时,当我缩小屏幕时,我的输入类型文本总是会在下方,但是我的 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>
答案 0 :(得分:2)
您好像用硬编码宽度值200覆盖了引导CSS
<div className='col-xs-2 col-md-2 col-lg-2 clearfix' style={{width: 200}}>
尝试删除样式属性。