引导程序中的无缝缩略图或内容库

Question

我正在尝试使用bootstrap 3创建响应式缩略图库。

我希望它不像这样的边框和一些重叠的动画文字。 接近这一点（在lovebootstrap.com上找到） http://www.riseragency.com/portfolio/

但是我能找到的引导缩略图库的所有示例都有很大的差距，基于这样的框架工作 http://www.bootply.com/70929

但是我无法在缩略图彼此接触的情况下减少间隙。

如何缩小上述示例网站之间的差距。

Answer 1

您还需要从.thumbnail课程中删除边框，边距和填充样式，以及@ jme11的非常好的提示：

#portfolio .thumbnail{
  border:0px;
  border-radius:0px;
  margin:0px;
  padding:0px;
}

<强> Edit to your Bootply

Answer 2

如果你想获得与升级网站相同的效果，你可以使用砌体插件。

如果你只是想在bootply示例中删除缩略图之间的间距，那么你可以在包含你的投资组合的行中添加一个id，如下所示：

<div id="portfolio" class="row">

然后添加以下css规则：

#portfolio.row {
   margin:0;
}
#portfolio .col-xs-3 {
  padding:0;
}

这将从列中删除标准的负行边距和填充。您不希望为整个网站执行此操作，因此我添加了ID来定位规则。