在引导程序中折叠标签

Posted 2023-02-24

【中文标题】在引导程序中折叠标签

【英文标题】：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 中还有其他方法吗？或者以任何其他方式而不是简单的方式？

【参考方案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。