Css 引导折叠正在将项目推到下一列

我正在使用bootstrap的可折叠功能来创建一个包含可扩展信息的商店列表

问题是，当我打开左侧列上的一个可折叠文件时，它会将一些项目推到下一列中。如果我在右边的列上打开一个可折叠的，所有东西都可以正常滑动，但它也会在左边的列上添加一个空间。请参阅下面的plunker。调整屏幕大小，直到有两行可折叠文件，然后单击每行中的一行以查看两种行为：

这是我正在使用的代码：

<div class="panel panel-default store-wrapper">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a data-toggle="collapse" data-target="{{removeSpaces(x.name, true)}}">
        {{x.name}}
      </a>
    </h4>
  </div>
  <div id="{{removeSpaces(x.name, false)}}" class="panel-collapse collapse">
    <div class="panel-body">
      <div class="store-info col-xs-12 col-sm-12 col-md-6 col-lg-6" ng-repeat="item in x.stores">
        <div class="col-xs-6 city">{{item.city}}:</div>
        <div class="col-xs-6 phone">
          <a ng-href="tel:{{item.number}}">{{item.number}}</a>
        </div>
      </div>
    </div>
  </div>
</div>

---

我希望得到的结果是，可折叠幻灯片只滑动它所在的列，并且项目不会移动到下一行。这在Bootstrap的网格系统中是可能的吗？

尝试使用两个独立的列作为面板。大概是这样的：

---

如果您需要，实际上有一个简单的解决方案

只需在每两个

col-xs-12

div之后添加

。它将停止向右边推动后面的元素

你可以看到这个例子

---

注意：请记住，将

清除div

放在每N个可折叠div之后（它应与列编号相同）

在plunker@JaqenH'ghar请查看更新的链接。谢谢。现在正在工作：）顺便说一句，我不是那个投反对票的人。。。不管怎样，左列的问题到底是什么？你想让可折叠文件在其他元素上折叠而不是向下推吗？@JaqenH'ghar我想让它们向下推，但我不想让打开的可折叠文件将项目推到下一列以补偿可折叠文件的大小。对于右边的容器，我不希望打开的可折叠容器在左边的容器中创建开放空间。如果你需要更多的澄清，请告诉我。谢谢或者干脆

。面板组：第n个类型（2n+1）{clear:left；}

@jackjop谢谢！这解决了第一个问题，但是当打开可折叠文件时，如何防止它在相反的列中创建空白呢？这就成功了！非常感谢你让我不再头疼了。HTML/CSS不是我的强项；-）。如果我有能力的话，我一定会给你赏金的。干杯@开发Hewebz Glab以提供帮助。我改进了我的普林克。现在没有多余的重复了。但我必须警告你，我不太清楚。这让我走上了正确的道路，我能够将同样的想法融入到我自己的项目中。它的工作非常完美，你甚至考虑移动，所以谢谢你！你真棒！祝你今天休息得愉快。