使用 Symfony2(.7) 减少 Twig 中的表单组布局

我试图摆脱 symfony2 表单中 twig 中的重复布局 目前我的布局看起来像：

<form name="step2" method="post" action="" class="productForm">
    <h2>Step2:</h2>

    <div id="step2">
        <div class="form-group">
            <div class="form-widget">
                <div id="step2_client1">
                    <div class="form-group"><label class="control-label required" for="step2_client1_clientTitle">Client 1 title:</label>

                        <div class="form-widget"><select id="step2_client1_clientTitle" name="step2[client1][clientTitle]" class="form-control">
                            <option value="Mr">Mr</option>
                            <option value="Mrs">Mrs</option>
                            <option value="Miss">Miss</option>
                            <option value="Ms">Ms</option>
                            <option value="Dr">Dr</option>
                            <option value="Sir">Sir</option>
                        </select></div>
                    </div>
                    <div class="form-group"><label class="control-label required" for="step2_client1_firstName">Client 1 first name:</label>

                        <div class="form-widget"><input type="text" id="step2_client1_firstName" name="step2[client1][firstName]" required="required" class="form-control">
                        </div>
                    </div>
                    <div class="form-group"><label class="control-label required" for="step2_client1_surname">Client 1 last name:</label>

                        <div class="form-widget"><input type="text" id="step2_client1_surname" name="step2[client1][surname]" required="required" class="form-control"></div>
                    </div>
                </div>
            </div>
        </div>
        
        ...
        
        <div class="form-group form-group-submit">
            <div class=""><a id="step2_save" class="has-spinner btn btn-default btn-submit"><span class="spinner"><i class="fa fa-spinner fa-spin"></i></span>Complete the quote
            </a></div>
        </div>
        <input type="hidden" id="step2__token" name="step2[_token]" class="form-control" value="xxx"></div>
</form>

我有一个脏的 js 脚本来按照我希望它显示的方式修复我的布局，但正如所说的那样，这是脏的。所以我想知道是否有人可以帮助我更改我的 twig 文件，以仅显示子元素的 form-group 和 form-widget css 类，而不是父元素。

肮脏的js脚本：

$('.form-group').each(function(e){
    if($(this).parents('.form-group').length) {
        var $realGroup = $(this).parents('.form-group');
        $realGroup.toggleClass('form-group');
        $realGroup.children('.form-widget').toggleClass('form-widget');
    }
});

还有树枝：

{% block form_row -%}
    {% spaceless %}
    <div class="form-group{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}">
        {{ form_label(form) }}
        <div class="form-widget">
            {{ form_widget(form) }}
            {{ form_errors(form) }}
        </div>
    </div>
    {% endspaceless %}
{%- endblock form_row %}

现在，twig 位是标准的 SF2 bootstrap 表单布局，我很确定我没有改变它。

因此，任何摆脱 js 脚本并实际在 twig 中执行的帮助都会很棒，我尝试了一些方法，但每一项结果都比我用 js 所做的更糟糕，所以我有点卡住了。

EDIT:

js 脚本所做的只是删除 css 类，这样布局就可以工作了。它看起来很平，因为它只是空的 div，但我所追求的并不是首先显示 div。我正在尝试更改 twig 脚本，而不是 css，因为这正是我们想要的方式。

你有三个选择。

1.手动创建每个字段：

{{ form_start(form, {'action': path(''), 'attr': {'class':'productForm'}}) }}
    {{ form_errors(form) }}

<div class="form-group">
    {{ form_label(form.clientTitle, 'Client 1 title:', {'label_attr': {'class': 'control-label required'}}) }}
    <div class="form-widget">
        {{ form_widget(form.clientTitle, { 'attr': {'class': 'form-control' }}) }}
    </div>
    {{ form_errors(form.clientTitle) }}
</div>

<div class="form-group">
    {{ form_label(form.firstName, 'Client 1 first name:', {'label_attr': {'class': 'control-label required'}}) }}
    <div class="form-widget">
        {{ form_widget(form.firstName, { 'attr': {'class': 'form-control' }}) }}
    </div>
    {{ form_errors(form.firstName) }}
</div>

<div class="form-group">
    {{ form_label(form.firstName, 'Client 1 last name:', {'label_attr': {'class': 'control-label required'}}) }}
    <div class="form-widget">
        {{ form_widget(form.firstName, { 'attr': {'class': 'form-control' }}) }}
    </div>
    {{ form_errors(form.firstName) }}
</div>


<div class="form-group form-group-submit">
    <div class="">
        <a id="step2_save" class="has-spinner btn btn-default btn-submit">
            <span class="spinner">
                <i class="fa fa-spinner fa-spin"></i>
            </span>
            Complete the quote
        </a>
    </div>
</div>

{{ form_end(change_password) }}

2.或者您可以创建自己的形式主题 http://symfony.com/doc/current/cookbook/form/form_customization.html#what-are-form-themes.

3.或者对每个表单使用一个循环：

{% for child in form.children %}

    <div class="form-group">
        {{ form_label(child, null, {'label_attr': {'class': 'control-label required'}}) }}
        <div class="form-widget">
        {{ form_widget(child, { 'attr': {'class': 'form-control' }}) }}
        </div>
        {{ form_errors(child) }}
    </div>

{% endfor %}

这完全取决于您未来的表单将有多少个字段以及您有多少个类似的表单。

然而，使用 JS 来做这样的事情是一个禁忌。