使用带有扩展预览的缩略图网格的引导网格答案

【问题标题】：Using bootstrap grid with thumbnail grid with expanding preview使用带有扩展预览的缩略图网格的引导网格
【发布时间】：2016-02-11 22:45:34
【问题描述】：

我正在创建一个站点并使用this bootstrap based theme 作为起始基地。如this Codrops tutorial 中所述，我还结合了非常好的缩略图网格和扩展预览。

我要做的是保留您可以在主题中看到的投资组合网格，其中所有预览图像都是响应式引导 col-lg-4 col-sm-6 元素，以便它们可以扩展和缩小以填充整个浏览器宽度并调整每行的元素数取决于屏幕宽度。

驱动具有扩展预览效果的缩略图网格的JS是grid.js，我认为如果我进行以下调整，它会应用相同的效果：

var Grid = (function() {
    // grid selector
    var $selector = '#og-grid',
    // list of items
    $grid = $( $selector ),
    // the items
    $items = $grid.children( '.grid-item' ),
    // ... etc ...

即：我已将项目设置为 .grid-item 而不是 li 并更新了引导 div 以便它们也具有此类。

我已经上传了我现在所在位置的快照here，它基本上具有按照 Codrops 教程实现的具有扩展预览效果的缩略图网格，但我希望能够保持与the original theme's 投资组合部分相关的响应优势。有没有人对我如何能够实现我希望做的事情有任何建议？请询问是否需要进一步澄清我想要弄清楚的内容。

【问题讨论】：

哈，我一定是遗漏了什么……你只需要将grid-item 的宽度写入一堆媒体查询中？不错的网站顺便说一句。
谢谢，是的，当然。我设置了一些媒体查询，如下所示，它们按预期呈现。带有扩展预览的缩略图网格有些歪斜......我会问另一个问题而不是扩展这个问题。谢谢@KarlDawson

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

按照@KarlDawson 的建议，我只是设置了一些媒体查询和按预期呈现的项目：

@media (min-width: 768px) {
  .og-grid li {
    width: 50%;
  }
}

@media (min-width: 1200px) {
  .og-grid li {
    width: 33.33333333333%;
  }
}

【讨论】：