Twitter bootstrap 使用Twitter引导对齐复选框而不占用整个列段的正确方法是什么？

我有一个引导表单，可以为每个成员实体生成潜在发票（每行一张）。每个成员的行都以一个复选框（不带标签）开始，以标识要刷新到数据库的发票

我不熟悉Twig和bootstrap，但我在正确构建模板以向用户正确展示时遇到了一个问题。虽然

{{form_widget（invoice.selected）}

占用了整个列块，但我的当前代码（下面）生成了页面ok。是否有一种方法可以使每个复选框以某种方式右对齐，或作为

invoice.memberid

小部件所用列块的一部分包括在内

{% block body %}
    {{ parent() }}
    <div class="container">
        <div class="row">
            <div class="col-sm-offset-1 col-sm-10 ">
                <div class="row">
                    <h1 class="col-sm-6"> {{ page_title }}:</h1>
                </div>
            </div>

        {{ form_start(form) }}

                 <div class="row">
                      {{ form_label(form.batchevent, 'Batch Invoice Description',{'label_attr': {'class': 'col-sm-12'}}) }}
                      {{ form_widget(form.batchevent, {'attr': {'class': 'col-sm-12'}}) }}
                 </div>

         {% for invoices in form %}
              {% for invoice in invoices %}
                    <div class="row">
                         <div class="col-sm-1 checkbox">
                              <label>
                                    {{ form_widget(invoice.selected) }}
                              </label>
                         </div>

                         {{ form_widget(invoice.member_id,  {'attr': {'class': 'col-sm-2'}}) }}
                         {{ form_widget(invoice.amount,      {'attr': {'class': 'col-sm-2'}}) }}
                         {{ form_widget(invoice.invoicedate, {'attr': {'class': 'col-sm-2 datepicker'}}) }}
                         {{ form_widget(invoice.currency,    {'attr': {'class': 'col-sm-2'}}) }}
                         {{ form_widget(invoice.comments,    {'attr': {'class': 'col-sm-3'}}) }}
                    </div>
              {% endfor %}
         {% endfor %}

                 <div class="row">
                      <input type="submit" value="Generate invoices" class="btn btn-default pull-left"/>
                 </div>

        {{ form_end(form) }}
        </div>
    </div>
{% endblock %}

---

您需要将复选框包装在一列中，而不是像这样将column类应用于它：

<div class="col-sm-2 text-left">
    {{ form_widget(invoice.selected) }}
</div>

{{form_小部件（invoice.selected）}

---

这将阻止它跨越整个列。

表单小部件在HTML中呈现为什么？谢谢–这将略微向上推复选框，使其与其他字段（文本框列除外）垂直对齐，看起来更好。然而，它仍然漂浮在它的指定列的中间。有没有一种方法可以在它的列中“右对齐”它，这样在台式机上它就不会显得那么孤独了？（见有问题的图片）谢谢@Gareth-我现在不在电脑旁，但今晚回家后我会检查一下：）谢谢你，这工作做得很好-尽管使用

文本右键

；-）

<div class="col-sm-2 text-left">
    {{ form_widget(invoice.selected) }}
</div>