2016-11-25 93 views
0

我正在嘗試使用react-bootstrap調整表單內的選擇語句。然而,他們沒有上漿完全正確:Select語句寬度大小無法正常工作?

enter image description here

我想最後一個字段顯示爲市,州(選擇),郵編的順序。但由於某種原因,它首先將國家置於首位。基本上,這是我所:

<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?但我需要調整選擇語句的大小,並且我發現這樣做的method基本上是將其包裝在div中,並設置了col-**-**類。

我在做什麼錯?無論如何,我可以把這個select內嵌到沒有奇怪的間距問題的形式?

任何幫助將不勝感激,因爲我是bootstrap新手,謝謝!

回答

1

是啊,它看起來完全像一個CSS問題,看react-bootstrap頁面看起來你應該使用一個FormControlSelect

<FormControl componentClass="select" placeholder="select"> 
    <option value="select">select</option> 
    <option value="other">...</option> 
    </FormControl> 

此外,使用col類名,如果父類中的唯一工作className="row"

1

在選擇字段添加更多的類類=旁邊的「表單控件中選擇」類

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

把!重要的,如果需要的話。 完成。 引導程序的窗體控件類具有邊框半徑,所有如果您不需要像所有其他人一樣添加此線