这样做的正确方法是创建自己的表单主题。我不会在这里写全部内容,但对你来说重要的是那些:
{% block choice_widget_expanded %}
{% spaceless %}
<div {{ block('widget_container_attributes') }} class="my-form-choices">
{% for child in form %}
{{ form_widget(child) }}
{% endfor %}
</div>
{% endspaceless %}
{% endblock choice_widget_expanded %}
{% block checkbox_widget %}
{% spaceless %}
<div class="checkbox">
<label for="{{ id }}"><input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans({}, translation_domain) }}</label>
</div>
{% endspaceless %}
{% endblock checkbox_widget %}
我从choice_widget_expanded 中删除了标签渲染,因此我可以在标签标签内添加复选框,就像您在解决方案中所使用的一样。但是您基本上可以在表单主题中做任何您想做的事情。如果你愿意,你也可以覆盖radio_widget。
如果您仔细查看复选框周围的 div,我将其命名为“my-form-choices”类。你可以给它你想要的课程。它可能是“col-lg-8”,就像你一样,但对我来说,拥有一个通用类名更有意义,然后在你自己的 less 文件中使用 mixins。您的 less 文件将如下所示:
@import '../../../../../../vendor/twitter/bootstrap/less/bootstrap.less';
.my-form-row {
.make-row();
}
.my-form-choices {
.make-lg-column(8);
}
.my-form-row-label {
.make-lg-column(4);
}
但这取决于你。如果您不想这样做,则不必这样做。最后,您可以通过像这样为您的页面启动树枝来使用您的主题:
{% extends 'MyOwnBundle::layout.html.twig' %}
{% form_theme form 'MyOwnBundle:Component:formtype.html.twig' %}
然后您就这样简单地显示该行(我在测试中使用的字段是可用性,您的是示例):
{{ form_row(form.availability) }}
我已经尝试过了(使用 Symfony 2.4),它可以工作。输出是这样的:
<div class="my-form-row">
<div class="my-form-row-label">
<label class="required">Availability</label>
</div>
<div class="my-form-choices" id="myown_website_contactmessage_availability">
<div class="checkbox">
<label for="myown_website_contactmessage_availability_0">
<input type="checkbox" value="morning" name="myown_website_contactmessage[availability][]" id="myown_website_contactmessage_availability_0">
Morning
</label>
</div>
<div class="checkbox">
<label for="myown_website_contactmessage_availability_1">
<input type="checkbox" value="afternoon" name="myown_website_contactmessage[availability][]" id="myown_website_contactmessage_availability_1">
Afternoon
</label>
</div>
<div class="checkbox">
<label for="myown_website_contactmessage_availability_2">
<input type="checkbox" value="evening" name="myown_website_contactmessage[availability][]" id="myown_website_contactmessage_availability_2">
Evening
</label>
</div>
</div>
</div>
另请注意,我没有像您在解决方案中那样的子行。事实上,您的解决方案超出了您最初提出的问题。
编辑:这是拥有多列的解决方案
要拥有多个列,这里有一个快速的解决方案。首先,表单主题可能是这样的:
{% block choice_widget_expanded %}
{% spaceless %}
<div class="my-form-choices-container">
<div {{ block('widget_container_attributes') }} class="my-form-choices">
{% for child in form %}
{{ form_widget(child) }}
{% endfor %}
</div>
</div>
{% endspaceless %}
{% endblock choice_widget_expanded %}
{% block checkbox_widget %}
{% spaceless %}
<div class="my-form-choice">
<div class="checkbox">
<label for="{{ id }}"><input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans({}, translation_domain) }}</label>
</div>
</div>
{% endspaceless %}
{% endblock checkbox_widget %}
然后您的 less 文件将如下所示:
@import '../../../../../../vendor/twitter/bootstrap/less/bootstrap.less';
.my-form-row {
.make-row();
}
.my-form-row-label {
.make-lg-column(4);
}
.my-form-choices-container {
.make-lg-column(8);
}
.my-form-choices {
.make-row();
}
.my-form-choice {
.make-md-column(6);
}
在此解决方案中,您可以通过更改列的大小来更改列数。细胞应堆叠整齐。在这种情况下,最好少编译(这里就不解释了)。我已经尝试过这个解决方案,并且效果很好。在这种情况下使用 less 的好处是,您可以在多个页面上使用相同的表单主题,并且只需为每个页面使用不同的“less”文件即可更改列数。