折叠引导程序中的标签

Collapse labels in bootstrap

本文关键字：标签 引导程序 折叠      更新时间：2023-09-26

我正在尝试使用Symfony项目形式的引导程序折叠标签，但它似乎无法按如下方式工作：

文件.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>

在引导程序中还有其他方法吗？还是以任何其他方式，但很简单？

假设引导程序正常工作，则呈现表单时会出现一个问题：

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 set 本身。就我而言：

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

相关文章：