我正在尝试使用react-bootstrap调整表单中的select语句。但是,它们的尺寸并不合适:
我希望最后一个字段按顺序显示为City,State(选择),Zip。但出于某种原因,它将国家置于首位。基本上,这就是我所拥有的:
<form inline>
<form control>
<select>
<form control>
这是我的以下代码:
<Form inline className="margin-bottom-5">
<FormControl
name='city'
type='text'
size='9'
placeholder='City'
value={this.props.generalInfoForm.get('city')}
onChange={(e) => {
this.props.onChange(this.props.generalInfoForm.set('city', e.target.value))
}}
/>
{' '}
<div className='col-xs-2'>
<Select
className='col-xs-2'
ref='stateSelect'
autofocus
options={select_options['US']}
simpleValue
clearable={false}
name='selected-state'
size='3'
disabled={false}
value={this.props.generalInfoForm.get('state')}
onChange={(state) => {
this.props.onChange(this.props.generalInfoForm.set('state', state))
}}
searchable={false}
/></div>
{' '}
<FormControl
name='zip'
type='text'
placeholder='Zip'
maxLength='4'
size='5'
value={this.props.generalInfoForm.get('zip')}
onChange={(e) => {
this.props.onChange(this.props.generalInfoForm.set('zip', e.target.value))
}}
/>
{' '}
</Form>
为什么选择在City字段之前显示?我把选择放在了城市场地之后,但它并没有那样工作。是因为col-xs-2
吗?但我需要调整select语句的大小,我发现这样做的method基本上是将它包装在div
中并设置col-**-**
类。
我做错了什么?无论如何,我可以将这个select
内联到表单中而没有奇怪的间距问题吗?
任何帮助都会非常感激,因为我是新手,谢谢!
答案 0 :(得分:1)
是的,它看起来完全像一个CSS问题,看着react-bootstrap
页面看起来你应该FormControl
使用Select
:
<FormControl componentClass="select" placeholder="select">
<option value="select">select</option>
<option value="other">...</option>
</FormControl>
此外,使用col
classNames仅在父类className="row"
答案 1 :(得分:1)
在选择字段
中的class =“form-control select”类旁边添加一个类
<style>
.select{
width:200px;
height:35px;
}
如果需要的话,重要! 完成。 表单控件类的bootstrap有边框半径,所有如果你不需要像所有其他的那样添加这一行