twitter-bootstrap 如何在 Bootstrap 手风琴的列表组项中使用多列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29956199/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use multiple columns in a list-group-item of a Bootstrap accordion?
提问by Greg
How does one use columns in the list items that expand out when an accordion is opened in Bootstrap (3)? I am trying to keep it simple, and just use the grid classes in list-group-items as divs, as in using the col-sm-3class.
在 Bootstrap (3) 中打开手风琴时，如何使用展开的列表项中的列？我试图保持简单，只是使用列表组项目中的网格类作为 div，就像使用col-sm-3类一样。
Here is a bootply.
这是一个bootply。
Excerpted, the accordion list-group-items look like this:
摘录，手风琴列表组项目如下所示：
<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>
The trouble is that when the accordions open, they don't get their height sized properly, and bleed into each other. I've tried adding a clearfix div under each list-group, but there are some weird artifacts with the first list-group-item border then.
麻烦的是，当手风琴打开时，它们的高度尺寸不正确，并且相互渗入。我已经尝试在每个列表组下添加一个 clearfix div，但是有一些奇怪的工件与第一个列表组项边框。
回答by potatopeelings
From the bootstrap documentation
来自引导程序文档
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
行必须放置在 .container（固定宽度）或 .container-fluid（全宽）中，以便正确对齐和填充。
and
和
Content should be placed within columns, and only columns may be immediate children of rows.
内容应该放在列中，并且只有列可以是行的直接子项。
Just add the row and container classes in the proper places and you'll have it.
只需在适当的位置添加行和容器类，您就会拥有它。
Updated bootply - http://www.bootply.com/LQgHemNzZr
更新 bootply - http://www.bootply.com/LQgHemNzZr
