在引导程序中折叠标签答案

【问题标题】：Collapse labels in bootstrap在引导程序中折叠标签
【发布时间】：2016-06-08 03:42:45
【问题描述】：

我正在尝试在 Symfony 项目表单中使用 Bootstrap 折叠标签，但它似乎无法按如下方式工作：

文件.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 中还有其他方法吗？或者以任何其他方式而不是简单的方式？

【问题讨论】：

标签： javascript php jquery twitter-bootstrap symfony

【解决方案1】：

假设引导程序正常工作，呈现您的表单存在一个问题：

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" />

在这种情况下，引导程序找不到数据目标#text。所以只需删除'id': 'text' 并将data-target 属性设置为id symfony 集本身。就我而言：

<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。

【讨论】：