Reactjs 如何使数组类型架构对象在一行中显示一个?反应jsonschema表单

Reactjs 如何使数组类型架构对象在一行中显示一个?反应jsonschema表单,reactjs,bootstrap-4,react-jsonschema-forms,Reactjs,Bootstrap 4,React Jsonschema Forms,我正在使用react jsonschema表单创建一个表单。单个组件显示良好,但阵列组件排成一行。如何使它们在一行中显示一个阵列对象,以便每次单击“添加”按钮时,新阵列对象都在新行中渲染。代码如下: const schema = { type: "object", properties: { Name: { type: "string", title: "Name", default: "A new Task" }, Title: { type: "object"

我正在使用react jsonschema表单创建一个表单。单个组件显示良好,但阵列组件排成一行。如何使它们在一行中显示一个阵列对象,以便每次单击“添加”按钮时,新阵列对象都在新行中渲染。代码如下:

    const schema = {
  type: "object",
  properties: {
    Name: { type: "string", title: "Name", default: "A new Task" },
    Title: { type: "object", properties: { First: { type: "string" }, Second: { type: "string" } } },
    XYZ: { type: "array", items: { type: "object", properties: { Third: { type: "string" }, Forth: { type: "boolean", enum: [true, false], enumNames: ["True", "False"] } } } }
  }
}

const uiSchema = {
  "ui:order": ["Name", "Title", "Done"],
  Name: { "ui:widget": "textarea" },
  Title: { First: { "ui:widget": "textarea" }, Second: { "ui:widget": "textarea" } },
  XYZ: { items: { Third: { "ui:widget": "textarea" }, Forth: { "ui:widget": "radio", "ui:options": { inline: true } } }, "ui:options": { orderable: false, removable: true, inline: false } }
}
表格编号如下:

<Form schema={schema}
              // formData = {defaultData}
              uiSchema={uiSchema}
              onChange={log("changed")}
              onSubmit={SubmitRoutine}
              onError={ErrorRoutine}
            />

如下图所示,阵列XYZ对象是固定宽度的,彼此相邻显示。我要它们全宽,每一个物体都在新的一行。我正在使用React和Bootstrap4 而且很多时候,我甚至必须通过点击加号按钮来添加第一个对象。我希望第一个对象自己出现。请告诉我如何修理它。感谢您签出库。它允许使用引导网格布局表单

如果不需要在模型中反映顺序,则可以通过以下方式实现:

包装元素的类*/ .数组项列表{ 显示器:flex; /*列,列反转,行,行反转*/ 弯曲方向:柱反向; }