CODEWITHSUNDEEP
angularjstwitter-bootstrap
Uladz Kha
Uladz Kha

Reputation: 2364

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.

Upvotes: 0

Views: 36

Answers (2)

10100111001
10100111001

Reputation: 1832

This should work. You are placing all of your images inside a single div column instead of creating a 3 unit column for each image div.

<div class="container" >
    <div class="gallery">
        <div class="row">
            <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>

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

Upvotes: 1

Soufiane Hassou
Soufiane Hassou

Reputation: 17750

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>

Upvotes: 1

Related Questions