在Bootstrap中折叠标签

Question

我正在尝试在Symfony项目表单中使用Bootstrap来折叠标签，但似乎不起作用，如下所示：

File.html.twig

<div class="form-group">
    {{
        form_label(form.Text,
                   'Text:',
                   {'label_attr': {'class': 'col-xs-2 control-label'}}
        )
    }}

    <div class="col-xs-2" style="width: 440px">
        <button type="button" class="btn btn-info" data-dismiss="modal"
                data-toggle="collapse" data-target="#text">TEXT</button>
        {{
            form_widget(form.Text,
                        {'attr': {'id': 'text',
                                  'class': 'collapse', 
                                  'placeholder': 'text..', 
                                  'style' : 'height: 200px'}}
            )
        }}
        {{ form_errors(form.Text) }}
    </div>

有没有其他在Bootstrap中实现它的方法？或者其他简单的方法？

- Masseleria

Answer 1

假设Bootstrap通常可以正常工作，但在渲染表单时出现了一个问题：

Symfony会自动设置id属性。因此，使用'id': 'text'不是覆盖Symfony的id，而只是添加另一个id属性，例如：

 <input type="text" id="pec_bundle_travelCostsBundle_test_Text" ... id="text" class="collapse" placeholder="text.." style="height: 200px" />

在这种情况下，Bootstrap 找不到数据目标 #text。因此，只需删除 'id': 'text' 并将 data-target 属性设置为 Symfony 自己设置的 ID 即可。在我的情况下：

<button type="button" class="btn btn-info" data-dismiss="modal"
        data-toggle="collapse" data-target="#pec_bundle_travelCostsBundle_test_Text">TEXT</button>
{{
    form_widget(form.Text,
                {'attr': {
                        'class': 'collapse', 
                        'placeholder': 'text..', 
                        'style' : 'height: 200px'}}
    )
}}
{{ form_errors(form.Text) }}

您可以通过使用浏览器查看网站源代码来找到id。

- goulashsoup