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

【问题标题】：Gapless thumbnail or content gallery in bootstrap引导程序中的无缝缩略图或内容库
【发布时间】：2014-07-18 21:38:51
【问题描述】：

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

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

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

但我无法在缩略图相互接触的地方获得更少的网格。

我怎样才能像上面的示例网站那样缩小差距。

【问题讨论】：

【解决方案1】：

如果您想要与riseagency 网站相同的效果，可以使用masonry 插件。

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

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

然后添加以下css规则：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：