Javascript 使用Bootstrap 4进行全宽扩展的可扩展网格

我正在尝试为一个画廊制作一个网格，其中有一个扩展的预览，显示细节。我正在使用这篇文章中的代码： 一切都很好，但我想使用引导4，使其响应。我面临的问题是，扩展现在位于列内部，使其具有相同的宽度，而不是整页宽度。是否有办法使其全宽或将扩展放置在柱外

<section class="films">
    <div class="container-fluid"> 
        <div id="og-grid" class="og-grid row">
          <div class="movie col-md-4">
            <a class="portfolio-box" href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/portfolio/fullsize/1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
              <img class="img-fluid" src="images/portfolio/thumbnails/1.jpg" alt="img01"/>
            </a>
          </div>
          <div class="movie col-md-4">
            <a class="portfolio-box" href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/portfolio/fullsize/1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
              <img class="img-fluid" src="images/portfolio/thumbnails/1.jpg" alt="img01"/>
            </a>
          </div>
          <div class="movie col-md-4">
            <a class="portfolio-box" href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/portfolio/fullsize/1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
              <img class="img-fluid" src="images/portfolio/thumbnails/1.jpg" alt="img01"/>
            </a>
          </div>
        </div>
     </div>
</section>

原始CSS：

和JS：

---

Codrops示例非常复杂，很难做出响应

由于您希望使用引导的响应能力，因此可以使用Collapse组件和一些JS逻辑来根据需要对details列进行排序。本例中的jQuery/JS更简单，并且与引导的网格断点对齐。没有额外的CSS（除了引导）是必要的

// initialize all cols with their natural order
$('.col-md-2').each(function(i,ele){
    let idx = $(ele).index('.col-md-2')
    $(this).css('order',idx)
})

// set the flexbox order of the details col in each row
var calcOrder = function(perRow){
    $('.collapse').each(function(i,ele){
        var idx = $(ele).index('.collapse')
        var modIdx = idx % perRow
        var posi = parseInt((perRow-modIdx) + idx)
        $(this).css('order',posi)
    })
}

// determine number per row based on window width
var breakpoints = function(width) {
      if (width >= 776) {
          //md
          calcOrder(6)
      }
      else if (width >= 567) {
          //sm
          calcOrder(3)
      }
      else {
          //xs
          calcOrder(2)
      }
}

// reset order on window resize
$(window).on('resize', function(){
    var win = $(this)
    breakpoints(win.width())
})

演示：

---

另见：