如何使 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-6，但这不起作用。

这是我的网页

<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

你不想要col-xs-6...你想要col-xs-12(100% 宽度)。您遇到的问题是您有 3 列的宽度为 50%，因此其中 2 列并排，第三列位于前两列的下方。

Answer 3

尝试以这种方式编辑代码。

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

Answer 4

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

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

Answer 5

<div class="container-fluid">
<div class="row">
<div class="col-xs-6 " style="background-color:lavender;">col-xs-6</div>
</div>
<div class="row">
<div class="col-xs-6 " style="background-`color:lavenderblush`;">col-xs-6</div>
</div>
<div class="row">
<div class="col-xs-6 " style="background-color:lavender;">col-xs-6</div>
</div>
</div>
</div>