2016-07-23 25 views
0

Ich habe eine einfache AngularJs Anwendung, ich benutze Bootstrap für Stile. Ich schrieb den nächsten Code:Warum Elemente nicht horizontal angezeigt werden?

<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

ich Dokumentation über Bootstrap zu lesen, und ich für horizontale Elemente gefunden, die ich .col-md-3 verwenden sollte, aber es nicht funktioniert . Vielleicht weiß jemand, wie ich es lösen kann?

P.S. In meiner Anwendung verwende ich ng-view Direktive.

Antwort

1

Die wiederholten divs sollten col-MD-3-Klasse haben, was Sie jetzt tun, ist die Schaffung eines div.col-md-3 mit einem Bündel von divs als Kinder

Eine Änderung entlang der Linien von das sollte es beheben:

  <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> 
1

Dies sollte funktionieren. Sie platzieren alle Ihre Bilder in einer einzelnen Div-Spalte, anstatt eine 3-Einheiten-Spalte für jedes Bild-Div zu erstellen.

Verwandte Themen