Как сделать 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 |

Я знаю, что так оно и есть, но я хочу достичь первого результата. Я пытался применить row к каждому из 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

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

Answer 2

Попробуйте отредактировать ваш код таким образом.

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 3

Вы не хотите col-xs-6 ... вы хотите col-xs-12 (ширина 100%). Проблема в том, что у вас есть 3 столбца шириной 50%, поэтому 2 из них расположены рядом, а третий - ниже первых двух.

Answer 4

Вы должны связать все 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>

Answer 5

Если вы хотите, чтобы они были в отдельной строке, оберните их внутри .row:

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

Сложными способами вы можете попробовать использовать классы .push и .pull вместе с .col-offset классы.