在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無法找到data-target #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 。