html - Bootstrap 3.3.7 折叠按钮问题(不起作用)

Question

我有以下代码:

@foreach(var data in Model.test){    
    <div style="margin: 3% 0 3% 2%;">
            <button type="button"
                    class="btn btn-warning"
                    style="display:block; width:40%;overflow-wrap:normal;white-space:normal;padding:.5%;"
                    data-toggle="collapse" data-target="#@data.option">
                @data.Name
            </button>
            <div id="@data.option" class="collapse" style="width:40%;float:right;white-space:normal; overflow:scroll;">
                <br />
                <div>
                    <a>
                        Title: @data.Name<br />

                        @foreach (var item in data.Documents)
                        {
                            <p>Related Document:  @item.Name</p>
                        }
                    </a>
                </div>
            </div>
        </div>
}

当我从 bootstrap 站点尝试一般示例时它工作正常..但是当我插入值等时我希望它失败..我错过了什么？这是在 MVC 网络应用程序的 View 中。

---

我将 id 更改为增量计数器.. 现在它可以工作了。正如所指出的那样，我可能在某处有一个副本。

Answer 1

存在导致此问题的空格和特殊字符。删除它们后一切正常。