使用bootstrap 3对齐同一行上的复选框

时间:2015-02-25 11:47:03

标签: html5 twitter-bootstrap layout material

我正在使用bootstrap 3模式,我动态生成复选框。它工作正常。我需要将复选框对齐在同一行上。所以我用过

 <div class="row" >                           
     <div   ng-repeat="item in selectedFields">
          <md-checkbox ng-model="checkbox"  class="col-xs-12" aria-label={{item.name}}>
          {{item.name}}
     </md-checkbox>
     </div>
  </div>

enter image description here

2 个答案:

答案 0 :(得分:0)

我认为问题出在您在md-checkbox标记中使用的类。您提供了class="col-xs-12"作为类,然后它将分配整行以显示该特定组件。将类更新为col-xs-3(连续4个)或col-xs-4(连续3个),您将获得它的内联。

除此之外,还有另一种方法可以使它正常工作。

以下是一个简单的form-input示例,您可以根据自己的要求进行更新。

<div class="container">
  <h2>Form control: inline checkbox</h2>
  <form>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 1
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 2
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 3
    </label>
  </form>
</div>

希望它能起作用

祝你好运!

答案 1 :(得分:-2)

是因为你使用的是col-xs-12而不是col-xs-4

<div class="row" >                           
 <div   ng-repeat="item in selectedFields">
      <md-checkbox ng-model="checkbox"  class="col-xs-4" aria-label={{item.name}}>
      {{item.name}}
 </md-checkbox>
 </div>