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

Question

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

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

使用扩展预览效果驱动缩略图网格的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投资组合部分相关的响应式收益。有没有人对我如何能够达到我希望做的事情有任何建议？请问我是否需要进一步澄清我想要解决的问题。

Answer 1

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

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

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