Bootstrap collapsible is pushing items to the next column - css

Question

I'm using bootstrap's collapsible functionality to have a list of stores with expandable information.
The problem is, when I open one of the collapsibles on the left hand column, it pushes some items into the next column. If I open a collapsible on the right hand column, everything slides properly, but it also adds a space on the left hand column. Please see the following plunker. Resize the screen until there are two rows of collapsibles and then click on one in each row to see the two behaviours:
http://plnkr.co/edit/2SLCQQJetyvM34mrCsHj?p=preview
This is the code I am using:
<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>
My desired result is to have the collapsible only slide the column that it lives in, and that items do not move onto the next row. Is this possible with Bootstrap's grid system?

Answer 1

Actually there's one simple solution to this if you want it.
Just put <div style="clear:both"></div> after every two col-xs-12 divs. And it will stop pushing the elements after it to the right.
You can see the example here.
Note: Remember, put clear div after every N collapsible div (it should be the same as the column number)

Answer 2

Try to use two separated columns for your panels. Something like this:
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-1">
xname-1
</a>
</h4>
</div>
<div id="xname-1" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-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>
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-2">
xname-2
</a>
</h4>
</div>
<div id="xname-2" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-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>
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-3">
xname-3
</a>
</h4>
</div>
<div id="xname-3" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-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>
</div>
<div class="col-sm-6">
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-4">
xname-4
</a>
</h4>
</div>
<div id="xname-4" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-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>
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-5">
xname-5
</a>
</h4>
</div>
<div id="xname-5" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-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>
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-6">
xname-6
</a>
</h4>
</div>
<div id="xname-6" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-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>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
UPD. I've improved my Plinker. Now there are no superfluous repetitions in it. But I must warn you that I do not know Angular well.
http://plnkr.co/edit/Hj0NF9Vb5ydNIrXLOwPT?p=preview
<body ng-controller="MainCtrl">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6" ng-repeat="column in [0,1]">
<div class="panel-group col-xs-12 stores-container" ng-repeat="x in storeList" ng-if="$index >= ( $parent.$index * storeList.length / 2 ) && $index < ( ( $parent.$index + 1 ) * storeList.length / 2 )">
<div class="panel panel-default store-wrapper">
<div class="panel-heading" data-toggle="collapse" data-target="{{removeSpaces(x.name, true)}}">
<h4 class="panel-title">
<a>
{{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" 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>
</div>
</div>
</div>
</div>
</body>