結合使用引導網格和縮略圖網格以及擴展預覽

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%;
  }
}