如何让Bootstrap的col-xs-6纵向排列而非横向并排？

我太懂这种踩坑的感觉了！当你给三个Formly字段都加了col-xs-6，默认情况下Formly会把同属一行的列元素放在同一个flex容器里，所以前两个col-xs-6会自动凑成一行，第三个才会换行，完全不是你想要的每个字段单独占一行的效果。你尝试给字段加row类没用，是因为Formly是把这个类直接加到字段的外层容器上，而Bootstrap的row需要作为列的父容器才能触发换行规则，单独给列加row根本起不到作用。

你的解决方案完全可行 #

你提到的把字段设为col-xs-12，再用<div class="col-xs-6"></div>包裹内部的表单控件，确实是个靠谱的办法。这样每个字段的外层容器占满整行，内部控件只占一半宽度，完美实现了你要的布局：

// 调整后的字段配置
vm.exportFields = [ 
  { 
    className: 'col-xs-12', 
    key: 'field1', 
    type: 'select2',
    template: '<div class="col-xs-6"><formly-select2 ng-model="model[options.key]" options="to.options" label="to.label"></formly-select2></div>',
    templateOptions: { 
      label: 'Field1', 
      valueProp: 'subCode', 
      labelProp: 'description', 
      options: [] 
    } 
  },
  // field2、field3配置同理
];

补充另一种更简洁的思路 #

其实还可以利用Formly的wrapper功能，不用每个字段都写重复的模板：

1. 先注册一个自定义wrapper：

formlyConfigProvider.setWrapper({
  name: 'single-col-wrapper',
  template: '<div class="row"><div class="col-xs-6"><formly-transclude></formly-transclude></div></div>'
});

2. 然后在字段里直接引用这个wrapper：

vm.exportFields = [ 
  { 
    key: 'field1', 
    type: 'select2',
    wrappers: ['single-col-wrapper'], // 应用wrapper
    templateOptions: { 
      label: 'Field1', 
      valueProp: 'subCode', 
      labelProp: 'description', 
      options: [] 
    } 
  },
  // 其他字段直接加这个wrapper就行
];

这个wrapper会自动给每个字段套上row和col-xs-6，既简洁又能保证布局统一。

总之，你找到的方法完全没问题，要是以后遇到类似布局需求，也可以试试wrapper的方式，省得重复写模板代码~

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