Question

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

我是Twig和bootstrap的新手，我遇到了正确构建模板的问题，无法正确地向用户展示。我的当前代码（下面）生成页面ok，尽管{{ form_widget(invoice.selected) }}占用了整个列块。我是否有办法让每个复选框右对齐一些如何或包含在用作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 %}

这给出了以下布局（每个成员重复一行）：

form_widget()生成如下HTML（使用member_id作为示例）：

<select id="invoice_batch_invoice_ids_0_member_id" name="invoice_batch[invoice_ids][0][member_id]" class="col-sm-2">            
    <option value="1" >Member 1  </option>            
    <option value="2" selected="selected">Member 2</option> 
</select>

Answer 1

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

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

这应该会阻止它跨越整个列。

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

1 个答案: