结合使用引导网格和缩略图网格以及扩展预览

Question

我正在创建一个网站，并将这个基于引导程序的主题用作起点。 正如Codrops教程中所述，我还结合了非常漂亮的Thumbnail Grid和Expanding Preview 。

我正在尝试做的是保持在主题中看到的投资组合网格，在该主题中所有预览图像都是响应式引导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，以便它们也具有此类。

我上传的我在目前位置快照这里基本上与扩大预览效果实现为每Codrops教程缩略图网格 ，但我希望能够保持与相关的响应好处原来的主题的投资组合部分。 有没有人对我如何能够实现我希望做的事情有任何建议？ 请问是否需要进一步澄清我要弄清楚的内容。

Answer 1

正如@KarlDawson所建议的那样，我只是设置了一些媒体查询，并按预期方式渲染了项目：

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

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