Question

我使用bootstrap向我的网站添加了一个右侧列表组，然后我为每个列表组项添加了一个折叠，所有这些都成功运行。我可以将文本添加到列表组崩溃，而不会发生任何不良事件。但是，每当我尝试添加链接时，折叠只会将文本所在的容器框外部的链接留下。

以下是一个list-group元素的代码：

 <!-- Defines the collpase method !-->
 <a class="list-group-item" data-toggle="collapse" href="#mapscollapse">
 <!-- Glypicon added !-->
 <span class="glyphicon glyphicon-menu-down pull-right vcenter"></span>
 <!--Added heading as maps !-->
 <h4 class="list-group-item-heading">Maps</h4>
 <!--Collpase Target !-->
 <div id="mapscollapse" class="collapse">
 <!-- Links !-->
 <ul>
 <li><a href="http://www.google.com" id = "link">Google</a></li>
 </ul>
 </div>

指向该网站的链接：http://www.tabletstudios.ca/csgo.html点击地图部分，详细了解该问题。

Answer 1

你没有在<a>内使用<a>标签，这就是它离开容器的原因。要为容器修复此问题，您需要使用<div>标记而不是<a>

你的结构是

<div id="homecollapse" class="collapse in" aria-expanded="true" style=""><a class="list-group-item" data-toggle="collapse" href="#homecollapse" aria-expanded="true">
                          </a><a href="http://www.w3schools.com" id="link">Visit W3Schools</a>
                        </div>

按如下方式更新您的结构

<div id="homecollapse" class="collapse in" aria-expanded="true" style=""><div class="list-group-item" data-toggle="collapse" href="#homecollapse" aria-expanded="true">
      <a href="http://www.w3schools.com" id="link">Visit W3Schools</a>
</div>
</div>

添加链接以折叠时的随机容器

1 个答案: