css - 填充引导行中的空列

标签 css twitter-bootstrap-3 grid-system

<分区>

我正在尝试在响应式网格中显示图像列表。 我使用的是 angular 和 bootstrap,图像是通过 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 天才,因此非常感谢您的帮助。

提前致谢

最佳答案

听起来您想要砖石布局。我建议你使用 Angular。

谷歌“angular masonry”就可以了。

关于css - 填充引导行中的空列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38532310/

上一篇:css - 带有滚动 tbody 的表中的 thead 内的垂直对齐

下一篇:html - Table中<th>标签的Max-width如何设置,Max-width是否支持<th>?

相关文章:

html - 折叠侧边栏 Bootstrap

html - 无法让列适合网格宽度

javascript - Bootstrap 4 网格系统错误

jquery - 从组中删除元素但保持 "odd/even"状态准确

css - 与 CSS Zen Garden 类似的事件网站?

html - 背景覆盖固定

php - 创建一个带有空白方 block 的表,用于丢失 mysql 数据

javascript - 阻止父页面向下滚动到 iframe

html - 出现滚动条时如何阻止 Bootstrap 3.1.1 向左移动内容?

html - 尝试为网站创建 css 样式(Bootstrap)