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

问题描述 投票:0回答:1

我正在尝试为具有扩展预览的画廊制作网格,以显示详细信息。我正在使用这篇不错的文章中的代码:https://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/一切正常,但我想使用Bootstrap 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:https://github.com/codrops/ThumbnailGridExpandingPreview/blob/master/css/component.css

和JS:https://github.com/codrops/ThumbnailGridExpandingPreview/blob/master/js/grid.js

javascript css bootstrap-4 flexbox grid
1个回答
0
投票

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

由于您想使用Bootstrap的响应能力,因此可以使用Collapse组件以及一些JS逻辑来按需对详细信息列进行排序。在这种情况下,jQuery / JS更简单,并且与Bootstraps的网格断点保持一致。不需要额外的CSS(超越Bootstrap)...

// 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())
})

演示:https://codeply.com/p/Fs1zOQCk1q


另请参见:Bootstrap Expanding Grid

© www.soinside.com 2019 - 2024. All rights reserved.