如何使头xs-6在下面而不是在彼此旁边？

Question

我在我的表单字段中使用了3 colx-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类。

Answer 2

你不想要-xs-6.您需要col-xs-12 (100%宽度)。你的问题是，你有三个50%宽的列，所以其中两个是并排的，第三个列在前两个的下面。

Answer 3

您必须将所有col-xs-6绑定到row类中。然后它就会以这种形式出现。

​

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container">

 <!-- Start of row  -->
  <div class="row">
    <div class="col-xs-6">
      My Text
    </div>
   </div>
  <!-- End of row  -->
  
  <!-- Start of row  -->
   <div class="row">
    <div class="col-xs-6">
      My Text
    </div>
   </div>
   
   <!-- Start of row  -->
   <div class="row">
    <div class="col-xs-6">
      My Text
    </div>
   </div>
   <!-- End of row  -->
   
 </div>

​