我已经在这个小问题上挣扎了一段时间(我认为是这样)。我尝试结合使用Bootstrap 3列表组和崩溃插件。
我有一个特定的版本正在运行,但是经过一些重构,它似乎再也无法正常崩溃了,尽管我使用的策略与以前相同。我只是将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 original
有人知道吗?提前致谢。
最佳答案
下面是我想出的。虽然您的“ Bootply原创”似乎可以正常工作。
主要变化:data-target
至href
在主collapse
div中添加了list-things
类
制成单独的嵌套<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>
我希望这是您要寻找的。