Vladimir Khodakovskey Vladimir Khodakovskey - 4 months ago 12
AngularJS Question

Why elements don't display horizontal?

I have a simple AngularJs application, I'm using Bootstrap for styles.
I wrote the next code:

<div class="container" >
<div class="gallery">
<div class="row">
<div class="col-md-3">
<div ng-repeat="itm in albumsCovers">
<a href="#album/"+{{itm.id}} data-title="My first Caption" data-lighbox="Vocation">
<img src="{{itm.link}}" width="200px" class="img-rounded" />
</a>
</div>
</div>

</div>
</div>
</div>


enter image description here

I was reading documentation on Bootstrap, and I found for horizontal elements that I should use .col-md-3 but it doesn't work. Maybe somebody knows how I can resolve it?

P.S. In my application i'm using ng-view directive.

Answer

The repeated divs should have col-md-3 class, what you're doing right now is creating a div.col-md-3 with a bunch of divs as children

A change along the lines of this should fix it:

            <div class="col-md-3" ng-repeat="itm in albumsCovers">
                <a href="#album/"+{{itm.id}} data-title="My first Caption" data-lighbox="Vocation">
                <img src="{{itm.link}}" width="200px" class="img-rounded" />
                </a>
            </div>