Twitter bootstrap 如何在引导手风琴的列表组项目中使用多列？

如何使用在引导中打开手风琴时展开的列表项中的列（3）？我试图保持简单，只使用列表组项中的网格类作为div，就像使用

col-sm-3

类一样

这是一本书

手风琴列表组项目摘录如下：

<div id="One" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-One">
    <div class="list-group">
                 <a class="list-group-item col-sm-3" href="#">a</a>
                <div class="list-group-item col-sm-3">b</div>
                <div class="list-group-item col-sm-3">c</div>
                <div class="list-group-item col-sm-3">d</div>
   </div>
</div>

B
C
D

---

问题是，当手风琴打开时，它们的高度没有得到适当的调整，并且相互渗透。我已经尝试在每个列表组下添加一个clearfix div，但是在第一个列表组项边框中有一些奇怪的工件。

来自引导文档

行必须放置在.container（固定宽度）或 .容器液体（全宽），以便正确对齐和填充

及

内容应该放在列中，并且只能放在列中 行的直接子行

只需在适当的位置添加行和容器类，就可以了

---

更新的bootply-

看起来就像我添加clearfix div时一样。换句话说，列表组项目行水平延伸到手风琴之外，垂直边框被覆盖。此外，每个列表组第一行的第一列似乎将顶部水平边框放置在行的底部。实际上我已经有了外部容器div，但是我看到你让accordion同时使用了panel-group和list-group类。我将尝试放入一些显式的行div，看看这是否有助于获得它们期望的父容器中的列。啊！我明白你的意思。然后将3个容器更换为容器流体。是的，这让情况好多了。下面是总结。父手风琴需要是一个面板组，而不是列表组（我的打字错误）。要获取列表组项中的列，我需要使每个可折叠面板使用container fluid类。此外，每个面板中的列表组div都需要使用row类。要修复第1行、第1列的边框，我需要在列表组的正前方插入一个清晰的修复。在这一点上，它看起来已经足够好了。在这里看到最终结果。