bootstrap元素上的砖石结构被推到了新的一排

masonry on bootstrap elements got bumped down to new row

本文关键字：一排 结构 元素 石结构 bootstrap      更新时间：2023-09-26

构件的性质是，每个构件的高度都会有所不同（由于图像和标题的原因），在应用砌体之前，其高度是未知的。虽然每个元素的宽度是用.col-lg-3固定的。

在每行有4个元素的渲染页面上，5个元素在视觉上独立于一行，6、7、8被向下推到第三行。

html代码

<div class="section-details">
  <div class="container">
    <div class="">
      <div class="masonry" id="elements" data-reference="0">
      <!-- elements will be pulled over dynamically -->
      </div>
    </div>
  </div>
</div>

并且每个新元素的内容都被包裹在类似以下的东西中

<div class="col-lg-3 element">
</div>

css.元素{填充：10px 10px 0px；}

javascript代码

// layout the elements
var layout = function(elements, $container, selector) {
  $container.imagesLoaded(function () {
    $container.masonry({
      itemSelector: selector,
      columnWidth: selector,
      isAnimated: true,
      animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false
      }
    }).append(elements).masonry('appended', elements, true);
  });
};

它以以下方式调用

layout(elements, $('#elements'), '.element');

那么这里可能出了什么问题？

在砖石源代码中调试并找出原因，重要的是元素的准备方式——每个被推送到元素数组的元素都应该是一个HTMLElement。一旦我解决了这个问题，问题就消失了。

相关文章：