选择语句宽度大小不能正常工作?

时间:2016-11-25 03:37:34

标签: css twitter-bootstrap reactjs

我正在尝试使用react-bootstrap调整表单中的select语句。但是,它们的尺寸并不合适:

enter image description here

我希望最后一个字段按顺序显示为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内联到表单中而没有奇怪的间距问题吗?

任何帮助都会非常感激,因为我是新手,谢谢!

2 个答案:

答案 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有边框半径,所有如果你不需要像所有其他的那样添加这一行