使用引导程序 3 对齐同一行上的复选框答案

【问题标题】：Align check boxes on the same row using bootstrap 3使用引导程序 3 对齐同一行上的复选框
【发布时间】：2015-04-27 09:37:07
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： html twitter-bootstrap layout angularjs-material

【解决方案1】：

我认为问题在于您在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>

希望有效果

祝你好运！

【讨论】：

【解决方案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>

【讨论】：

您能否通过解释您如何更改问题中的代码来改进此答案？