Leere Spalten in Bootstrap-Zeile füllen

Ich versuche, eine Liste von Bildern in einem ansprechenden Raster anzuzeigen. Ich benutze Angular und Bootstrap und die Bilder werden dynamisch über die Flickr-API geladen. Wie auch immer, das ist der Codeausschnitt, in dem ich die Bilder zeige.Leere Spalten in Bootstrap-Zeile füllen

<div class="row row-content"> 
    <div class="col-xs-12 col-sm-6 col-lg-4" ng-repeat="photo in photos"> 
     <a href="" ng-click="openPhotoGallery(photo)"> 
      <img ng-style="{height: (photo.height_c > photo.width_c) ? '494px' : '237px'}" class="img-responsive thumbnail preview-photos" ng-src="https://farm{{photo.farm}}.staticflickr.com/{{photo.server}}/{{photo.id}}_{{photo.secret}}_z.jpg" alt="{{photo.title}}"> 
     </a> 
    </div> 
</div>

This is the result

Wie man dort sehen kann, ist auf der linken Seite des vertikalen Bild acolumn, die leer bleibt. Ich denke, das ist das normale Verhalten des Bootstrap, aber gibt es eine Möglichkeit, Bootstrap auch diesen Raum zu füllen?

Wie Sie vielleicht verstanden haben, bin ich kein CSS-Genie, so dass jede Hilfe sehr geschätzt wird.

Vielen Dank im Voraus

Quelle

2016-07-22 Riccardo Trebbi

füllen Sie es mit was? Was ist das gewünschte Verhalten hier? – Toby

Wenn ich richtig verstehe, versuchen Sie, die Bilder ohne diese Lücken zusammenzupassen. Wenn ja, lesen Sie diesen Blog-Post aus: https://css-tricks.com/seamless-responsive-photo-grid/ –

-1

Es klingt wie Sie wollen ein Mauerwerk Layout. Ich schlage vor, Sie verwenden und eckig.

Sie sind Leenty da draußen google "eckiges Mauerwerk".

Quelle

2016-07-22 18:30:03

-1

ich denke, Sie haben nicht erstellt col div nach der div Zeilen

Quelle

2016-07-22 18:38:00

Leere Spalten in Bootstrap-Zeile füllen

Antwort

Verwandte Themen