如何制作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 |

我知道这是它的工作方式,但我想实现第一个结果.我尝试过对每个col-xs-6s应用行但是没有用.

这是我的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>

这就是我如何构建控制器中的形式

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类.