【问题标题】:Fill empty columns in bootstrap row [duplicate]填充引导行中的空列[重复]
【发布时间】:2016-07-22 17:34:14
【问题描述】:

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

<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

如您所见,垂直图像左侧的一列仍为空。 我想这是引导程序的正常行为,但是有没有办法告诉引导程序也填充那个空间?

您可能已经理解,我不是 CSS 天才,因此我们将不胜感激。

提前谢谢你

【问题讨论】:

  • 用什么填充?这里期望的行为是什么?
  • 如果我理解正确,您正在尝试使图像组合在一起而没有这些间隙。如果是这样,请查看此博客文章:css-tricks.com/seamless-responsive-photo-grid

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


【解决方案1】:

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

那里有很多只是谷歌“角砖石”。

【讨论】:

    【解决方案2】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2014-05-10
      • 1970-01-01
      • 2014-11-10
      • 2023-02-02
      • 1970-01-01
      • 1970-01-01
      • 2013-12-17
      相关资源
      最近更新 更多