Vue Form Generator中如何实现单选按钮的横向排列？

Great question! Since you’re already using Bootstrap-style classes like col-md-*, we can leverage that to get your radio buttons inline easily. Here are two straightforward solutions:

Solution 1: Use Bootstrap's Built-in Class (Recommended if you’re using Bootstrap) #

vue-form-generator lets you pass classes directly to the radio button containers via the inputClasses property. Just add this line to your gender field configuration:

{
  type: "radios",
  label: "Gender",
  model: "gender",
  values: [
    "Male",
    "Female",
    "Other"
  ],
  styleClasses:'col-md-3',
  inputClasses: 'form-check-inline' // Add this line
}

Bootstrap’s form-check-inline class overrides the default block-level display of each radio option, making them sit side by side instead of stacking vertically.

Solution 2: Custom CSS (If you aren’t using Bootstrap) #

If Bootstrap isn’t part of your project, add this custom CSS to your component’s <style> section:

/* Target vue-form-generator's radio button containers */
.vfg-field-radios .form-check {
  display: inline-block;
  margin-right: 1.5rem; /* Add spacing between options */
}

This forces the radio containers to display inline, achieving the horizontal alignment you want.

Full Modified Schema Snippet #

Here’s what your updated fields array for the gender section will look like:

{
  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',
    inputClasses: 'form-check-inline' // Added this line
  }]
}

Either approach will get your gender radio buttons aligned horizontally as you need.

内容的提问来源于stack exchange，提问作者Ashwini