Vuejs2-如何在vue表单生成器中对单选按钮进行内联对齐？

Iam使用“vue表单生成器”插件动态加载表单字段。在这些字段中，我对“性别”字段使用“单选按钮”。选项以一个在另一个下面的方式显示，但我希望该选项应以“内联”样式显示

如何对齐同一行中的单选按钮选项（内联）

这是我的代码：addMember.vue

  <template>
    <div class="panel-body">
      <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
        <input type="submit" value="Submit">
    </div>
  </template>

  <script>
  import Vue from 'vue'
  import VueFormGenerator from "vue-form-generator";
  import "vue-form-generator/dist/vfg.css";

  Vue.use(VueFormGenerator);

  export default {
    data: () => ({

    model: {             
  building: "",
  unitCategory: "",
  unit: "",
  fullName: "",
  gender: "",
  },

    schema: {
      groups: [{
  fields: [{
    type: "select",
    inputType: "text",
    label: "Building",
    model: "building",
    required: true,
    styleClasses:'col-md-6',
     values: [
        { id: "", name: 'Select Building' },
        { id: 'A', name: 'Block-A'},
        { id: 'B', name: 'Block-B'},
    ],
     selectOptions: {
    hideNoneSelectedText: true,
  }
  }]
  },{
  fields: [{
    type: "select",
    inputType: "text",
    label: "Unit Category",
    model: "unitCategory",
    required: true,
    styleClasses:'col-md-3',
    values: [
        { id: "", name: 'Select Unit Category' },
        ],
     selectOptions: {
    hideNoneSelectedText: true,
  }
  },{
    type: "select",
    inputType: "text",
    label: "Unit",
    model: "unit",
    required: true,
    styleClasses:'col-md-3',
    values: [
        { id: "", name: 'Select Unit' },
        ],
     selectOptions: {
    hideNoneSelectedText: true,
  }
  }]
  },{
  fields: [{
    type: "input",
    inputType: "text",
    label: "Full Name",
    model: "fullName",
    placeholder: "Enter Full Name",
    required: true,
    styleClasses:'col-md-3'
  },
  {
    type: "radios",
    label: "Gender",
    model: "gender",
    values: [
        "Male",
        "Female",
        "Other"
    ],
    styleClasses:'col-md-3'
}]
  }]
},

      formOptions: {
        validateAfterLoad: true,
        validateAfterChanged: true
      }
    }),

  }
  </script> 

从“Vue”导入Vue
从“vue表单生成器”导入VueFormGenerator；
导入“vue表单生成器/dist/vfg.css”；
Vue.use（VueFormGenerator）；
导出默认值{
数据：（）=>({
型号：{
建筑物：“，
单位类别：“，
单位：“，
全名：“，
性别：“，
},
模式：{
小组：[{
字段：[{
键入：“选择”，
输入类型：“文本”，
标签：“建筑”，
模型：“建筑”，
要求：正确，
样式类：'col-md-6'，
价值观：[
{id:，名称：'Select Building'}，
{id:'A'，name:'Block-A'}，
{id:'B'，name:'Block-B'}，
],
选择选项：{
hideNoneSelectedText:对，
}
}]
},{
字段：[{
键入：“选择”，
输入类型：“文本”，
标签：“单位类别”，
型号：“unitCategory”，
要求：正确，
样式类：'col-md-3'，
价值观：[
{id:，name:'选择单元类别'}，
],
选择选项：{
hideNoneSelectedText:对，
}
},{
键入：“选择”，
输入类型：“文本”，
标签：“单位”，
型号：“单位”，
要求：正确，
样式类：'col-md-3'，
价值观：[
{id:，名称：'Select Unit'}，
],
选择选项：{
hideNoneSelectedText:对，
}
}]
},{
字段：[{
键入：“输入”，
输入类型：“文本”，
标签：“全名”，
型号：“全名”，
占位符：“输入全名”，
要求：正确，
样式类：'col-md-3'
},
{
类型：“收音机”，
标签：“性别”，
模式：“性别”，
价值观：[
“男性”，
“女性”，
“其他”
],
样式类：'col-md-3'
}]
}]
},
表格选项：{
validateAfterLoad:true，
validateAfterChanged:true
}
}),
}

您可以将自定义css添加到收音机输入中

{
    type: "radios",
    label: "Gender",
    model: "gender",
    values: [
        "Male",
        "Female",
        "Other"
    ],
    styleClasses:'col-md-3 display-inline'
}

在你的css中

.display-inline label {
  display: inline !important;
}

var vm=new Vue({
el:“应用程序”，
组成部分：{
“vue表单生成器”：VueFormGenerator.component
},
数据（）{
返回{
型号：{
},
模式：{
字段：[{
类型：“收音机”，
标签：“选择您的性别”，
模特：“朋友”，
价值观：[
“男性”，
“女性”，
“其他”
],
样式类：“显示内联”
}]
},
表格选项：{
validateAfterLoad:true，
validateAfterChanged:true
}
};
}
});
。显示内联标签{
显示：内联！重要；
}

vue表单生成器演示
形式
是。可以在构件底部添加块。