javascript - 如何使 col-xs-6 在下方而不是彼此相邻？

Question

我在我的表单域中使用了 3 col-xs-6，但我没有得到我想要的结果。

我想实现这个:

| col-xs-6 | 
| col-xs-6 |
| col-xs-6 |

但是我看到了这个

| col-xs-6 | col-xs-6 |
| col-xs-6 |

我知道这是它的工作方式，但我想获得第一个结果。我已尝试将 row 应用于每个 col-xs-6，但这没有用。

这是我的html

<div class="col-xs-12">
   <h1>Form</h1>

   <form class="top20" ng-submit="vm.exportForm()" name="vm.exportForm" novalidate>
       <formly-form model="vm.exportModel" fields="vm.exportFields" form="vm.exportForm"></formly-form>
   </form>
</div>

这就是我在 Controller 中构造表单的方式

vm.exportFields = [
    {
        className: 'col-xs-6',
        key: 'field1',
        type: 'select2',
        templateOptions: {
            label: 'Field1',
            valueProp: 'subCode',
            labelProp: 'description',
            options: []
        }
    },
    {
        className: 'col-xs-6',
        key: 'field2',
        type: 'select2',
        templateOptions: {
            label: 'Field2',
            valueProp: 'subCode',
            labelProp: 'description',
            options: []
        }
    },
    {
        className: 'col-xs-6',
        key: 'field3',
        type: 'select2',
        templateOptions: {
            label: 'Field3',
            valueProp: 'subCode',
            labelProp: 'description',
            options: []
        }
    }
];

更新

我决定做的是让我的字段 col-xs-12并将它们包裹在 <div class="col-xs-6"></div> 中反而。看起来像我期望的那样。谢谢大家。

Answer 1

如果你想要它们在自己的行中，将它包装在一个 .row 中:

.row
  | col-xs-6 |
.row
  | col-xs-6 |
.row
  | col-xs-6 |

在复杂的方式中，您可以尝试使用 .push 和 .pull 类，以及 .col-offset 类。