选择语句宽度大小无法正常工作？答案

【问题标题】：Select statements width sizes not working properly?选择语句宽度大小无法正常工作？
【发布时间】：2016-11-25 03:37:34
【问题描述】：

我正在尝试使用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 内联到表单中而不会出现奇怪的间距问题吗？

任何帮助将不胜感激，因为我是引导程序的新手，谢谢！！！

【问题讨论】：

标签： css twitter-bootstrap reactjs

【解决方案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" 时才有效

【讨论】：

【解决方案2】：

在选择字段中的 class="form-control select" 类旁边再添加一个类

<style>
.select{
width:200px;
height:35px;
}

如果需要，放 !important。完毕。引导程序的表单控制类有边界半径，如果你不需要像所有其他的一样添加这条线

【讨论】：