Categories
angularjs css html javascript twitter-bootstrap

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

I’ve wasted 4 hours on this. I have four objects in four columns. When the view becomes small, I have a 6-width column instead of a 3-width. They refuse to go side-by-side, and no clearfix class placement has fixed it. Firefox and Chrome.

<div class="row" ng-controller="LocationsMainPageController as locMainCtrl">
<div class="col-md-3 col-xs-6" ng-repeat="loc in locMainCtrl.locations">
<img class="img-responsive img-thumbnail"
ng-src="https://www.faqcode4u.com/faq/438754/{{ 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 at 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 you can see, I have looped through the objects with AngularJS. I can’t think of why this would matter, but just in case! Here’s a picture – no rep so I can’t post it directly. Sorry.

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

Can anyone help? Certainly I’m not the only one??

Thanks to you all many times over for the help and inspiration. Special thanks to @Jared for his suggestion of adding the clearfix div based on $index. This is an area I didn’t know about in AngularJS, and your suggestion helped me research it.

Here is the solution I came up with.

      <!-- Four columns below the carousel -->
<div class="row" ng-controller="LocationsMainPageController as locMainCtrl">
<!-- Wrapper Div -->
<div ng-repeat="loc in locMainCtrl.locations">
<div class="col-md-3 col-xs-6">
<img class="img-responsive img-thumbnail"
ng-src="https://www.faqcode4u.com/faq/438754/{{ 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 at eros. Praesent commodo
cursus magna.</p>
<p><a class="btn btn-default" href="#" role="button">Go Here! &raquo;</a></p>
</div>
<!-- Clearfix Div -->
<!-- $index is 0-based -->
<div ng-if="$odd" class="clearfix"></div>
</div>
<!-- /.columns -->
</div>
<!-- /.row -->

As you can see, within an ng-repeat there is a property called $odd. There are others in the docs. By creating a surrounding div and accessing the $odd property with ng-if I was able to add the clearfix at an appropriate time.

Thanks again to all of you!