在bootstrap行中填充空列

时间:2016-07-22 17:34:15

标签: css twitter-bootstrap-3 grid-system

我正在尝试在响应式网格中显示图像列表。 我使用角度和引导程序,图像通过flickr API动态加载。 无论如何,这是我显示图像的代码片段。

<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

正如您所看到的,垂直图像左侧有一个空列的空格。 我想这是bootstrap的正常行为,但有没有办法告诉bootstrap也填充这个空间?

您可能已经理解,我不是CSS天才,所以任何帮助都会受到很多赞赏。

提前谢谢

2 个答案:

答案 0 :(得分:-1)

听起来你想要一个砖石布局。我建议你使用和有角度的。

那里只有谷歌“有角度的砌体”。

答案 1 :(得分:-1)

我认为在制作行div之后你还没有创建col div