如何在 Bootstrap 手风琴的列表组项中使用多个列？答案

【问题标题】：How to use multiple columns in a list-group-item of a Bootstrap accordion?如何在 Bootstrap 手风琴的列表组项中使用多个列？
【发布时间】：2015-07-09 11:23:43
【问题描述】：

如何使用在 Bootstrap (3) 中打开手风琴时展开的列表项中的列？我试图保持简单，只使用 list-group-items 中的网格类作为 div，就像使用 col-sm-3 类一样。

这是bootply。

摘录下来，手风琴列表组项如下所示：

<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>

问题在于，当手风琴打开时，它们的高度尺寸不合适，并且会相互渗入。我尝试在每个列表组下添加一个 clearfix div，但是在第一个列表组项边框上会出现一些奇怪的工件。

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

来自引导文档

行必须放置在 .container（固定宽度）或 .container-fluid（全角）用于正确对齐和填充。

和

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

只需在适当的位置添加行和容器类，您就会拥有它。

更新了 bootply - http://www.bootply.com/LQgHemNzZr

【讨论】：

这看起来就像我添加 clearfix div 时一样。换句话说，list-group-item 行在水平方向延伸到手风琴之外，并且垂直边界被覆盖。此外，每个列表组的第一行中的第一列似乎将顶部水平边框放置在行的底部。实际上我已经有了外部容器 div，但是我看到你让手风琴同时使用了面板组和列表组类。我将尝试放入一些显式的行 div，看看这是否有助于将列获取为预期的父容器。
啊！我明白你的意思了。然后将 3 个容器更改为 container-fluid。 bootply.com/Sq6PMkM9L9
是的，这让它变得更好了。所以这里是总结。父手风琴必须是面板组，而不是列表组（我的错字）。要获取 list-group-items 中的列，我需要让每个可折叠面板都使用 container-fluid 类。此外，每个面板中的列表组 div 需要使用行类。要修复第 1 行、第 1 列的边界，我需要在列表组之前插入一个 clear-fix。在这一点上，它看起来已经足够好了。在此处查看最终结果bootply.com/JsrMTohJJT。