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

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

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>

Answer 4

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

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

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

5 个答案: