如何在ant design Vue中，使得两个a-form-item并排存在

如何在ant design Vue中，使得两个a-form-item并排存在

最近在使用ant designVue的过程中，发现两个for item无法并排存在的问题：
如下图：

因此进行了思考，其实可以采用先把两个固定在一个row里面，然后在这个row里面进行划分，划分为两个不同的col列，从而实现并排的排列方法！

一个简单的例子如下：

<a-form  :form="form"  @submit="handleSubmit" le>            
                                <a-row :gutter="24">              
                                    <a-col :span="12" >                       
                                        <a-form-item  label="Note"  :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"  >                      
                                             <a-input v-decorator="[ 'note', {rules: [{ required: true, message: 'Please input your note!' }]}]"/>                   
                                        </a-form-item>                
                                    </a-col>              
                                    <a-col :span="12">                    
                                        <a-form-item label="Gender" :label-col="{ span: 8 }"  :wrapper-col="{ span: 16 }" >                      
                                             <a-select  v-decorator="[  'gender', {rules: [{ required: true, message: 'Please select your gender!' }]} ]" placeholder="Select a option and change input text above" @change="handleSelectChange" >                       
                                            <a-select-option value="male">  male</a-select-option>                        
                                            <a-select-option value="female"> female</a-select-option>                        
                                            </a-select>                    
                                        </a-form-item>               
                                    </a-col>            
                                </a-row>        
                            </a-form>

实现之后的样式为：

便可以更加方便的排列多行表单的项！
respect！！！