Bootstrap 3关于高度的折叠问题

Question

我已经为这个小问题挣扎了一段时间，我认为这是个小问题。我尝试将Bootstrap 3列表组和collapse插件结合起来。

我有一个特定的版本在运行，但经过一些重构，它似乎不再正常崩溃，尽管我使用了和以前相同的"策略"。我刚刚将list-group-item类从achor标记移到其父div标记。问题是，它并没有完全"覆盖"我的div(和锚点)。

我能够提取关键部分：

<div class="list-group">
<a data-toggle="collapse" data-target=".list-things" class="list-group-item active">Things</a>
<div class="list-group-item list-things in">
<a href="#">Foo</a>
</div>
<div class="list-group-item list-things in">
<a href="#">Bar</a>
</div>
<div class="list-group-item list-things in">
<a href="#">Baz</a>
</div>
</div>

需要记住的一件重要事情是，list-group需要直接"访问"用list-group-item注释的子级。否则，每个list-group-item将独立地具有"双"边界(border-top和border-bottom)，因为它是:first和:last的子级；如果你在Bootstrap CSS中查找它，它就会表现出这种行为。

因为Bootply比阅读一些代码更方便，所以这里有一个链接：Bootply。也许展示我最初拥有的东西也很有用(也只是关键的东西)：Bootply原始

有人有主意吗？提前谢谢。

Answer 1

下面是我的想法。尽管你的"Bootply原创"似乎正在发挥作用。

主要变化：

1. data-target至href
2. 将collapse类添加到主list-thingsdiv
3. 单独嵌套的<div class="list-group-item">

<div class="list-group">
<a data-toggle="collapse" href=".list-things" class="list-group-item active">Things</a>
<div class="list-things collapse in">
<div class="list-group-item">
<a href="#">Foo</a>
</div>
</div>
<div class="list-things collapse in">
<div class="list-group-item">
<a href="#">Bar</a>
</div>
</div>
<div class="list-things collapse in">
<div class="list-group-item">
<a href="#">Baz</a>
</div>
</div>
</div>

我希望这就是你想要的。