javascript - AngularJS + Bootstrap: Two col-xs-6 columns will not align -

i've wasted 4 hours on this. have 4 objects in 4 columns. when view becomes small, have 6-width column instead of 3-width. refuse go side-by-side, , no clearfix class placement has fixed it. firefox , chrome.

<div class="row" ng-controller="locationsmainpagecontroller locmainctrl">     <div class="col-md-3 col-xs-6" ng-repeat="loc in locmainctrl.locations">         <img class="img-responsive img-thumbnail"              ng-src="{{ loc.images['0'].image }}"              alt="{{ loc.raw }}">          <h2>{{ loc.raw }}</h2>          <p class="hidden-xs">donec sed odio dui. etiam porta sem malesuada magna mollis euismod. nullam id dolor id nibh ultricies             vehicula ut id elit. morbi leo risus, porta ac consectetur ac, vestibulum @ eros. praesent commodo             cursus magna.</p>          <p><a class="btn btn-default" href="#" role="button">go here! &raquo;</a></p>     </div>     <!-- /.columns --> </div> <!-- /.row --> 

as can see, have looped through objects angularjs. can't think of why matter, in case! here's picture - no rep can't post directly. sorry.

http://i.stack.imgur.com/1pjrg.jpg

can help? i'm not one??

ah, i've run problem before. cause image heights not same, causing grid messed up. fix simple, give image fixed height. stick in css:

.thumbnail img {   min-height: 150px;   height: 150px; } 

and add thumbnail class parent div:

<div class="thumbnail col-md-3 col-xs-6" ng-repeat="loc in locmainctrl.locations">