如何制作col-xs-6而不是彼此相邻？

I'm using 3 col-xs-6 for my form fields but I'm not getting the result I want.

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

I want to achieve this:

我想实现这个目标：

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

but instead I see this

但相反，我看到了这一点

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

I know this is the way it works but I want to achieve the first result. I've tried applying row to each of the col-xs-6s but that didn't work.

我知道这是它的工作方式但我希望实现第一个结果。我已经尝试将行应用于每个col-xs-6s，但这不起作用。

This is my html

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

and this is how I structure the formly form in the 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: []
        }
    }
];

Update

更新

What I've decided to do is make my fields col-xs-12 and wrap them in a <div class="col-xs-6"></div> instead. Looks like I expected it to be. Thanks guys.

我决定做的是让我的字段col-xs-12并将它们包装在

中。看起来像我预期的那样。多谢你们。

5 个解决方案

#1

If you want them in its own line, wrap it inside a .row:

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

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

In complex ways, you can try using .push and .pull classes, along with .col-offset classes.

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

#2

You don´t want col-xs-6... you want col-xs-12 (100% width). The problem you are having is that you have 3 columns with 50% width, so 2 of them are side by side and the third one is below of the first two.

你不想要col-xs-6 ......你想要col-xs-12（100％宽度）。您遇到的问题是您有3列宽度为50％，因此其中2列并排，第3列低于前两列。

#3

Try editing your code this way.

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

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: []
        }
    }
];

#4

You have to bind all the col-xs-6 inside the row class. Then it will be in that form.

您必须绑定行类中的所有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>

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