我正在尝试使用 react-bootstrap 调整表单中选择语句的大小.但是,它们的尺寸不太合适:
我希望最后一个字段按城市、州(选择)、邮政编码的顺序显示。但出于某种原因,它将国家放在首位。基本上,这就是我所拥有的:
<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>
为什么选择显示在城市字段之前?我将选择放在城市字段之后,但它不是那样工作的。是因为 col-xs-2
吗?但我需要调整 select 语句的大小,并且 method我发现这样做基本上是将它包装在 div
中并设置一个 col-**-**
类。
我做错了什么?无论如何,我可以将这个 select
内联到表单中而不会出现奇怪的间距问题吗?
任何帮助将不胜感激,因为我是 bootstrap 的新手,谢谢!!!
最佳答案
是的,它看起来完全像一个 CSS 问题并查看 react-bootstrap
页面看起来你应该使用 FormControl
对于 Select
:
<FormControl componentClass="select" placeholder="select">
<option value="select">select</option>
<option value="other">...</option>
</FormControl>
另外,使用 col
classNames 仅在父类为 className="row"
时有效
关于css - 选择语句宽度大小无法正常工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40797333/