javascript - 在 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 中还有其他方法吗？或者以任何其他方式但简单地？

Answer 1

假设 bootstrap 正常工作，呈现表单时出现一个问题:

Symfony 自动设置 id 属性。所以使用 'id': 'text' 你不会覆盖 symfonys 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。