Isotope在两栏布局中无法填满容器宽度问题咨询

问题核心 #

Isotope在全屏容器中能正常显示3列，但在col-sm-9的两栏布局里，插件加载后会从初始的3列变为2列，无法填满容器宽度。

问题根源分析 #

1. 重复初始化与选择器错误：代码中同时初始化了.newGallery和.gallery两个容器，且后续过滤操作绑定到了错误的.gallery选择器，导致布局逻辑混乱。
2. 布局模式冲突：同时设置了fitRows和masonry两种布局模式，Isotope无法正确识别预期的网格布局规则。
3. HTML结构嵌套冲突：.newGallery内部嵌套了额外的row，Bootstrap的row负margin会干扰Isotope的容器宽度计算。
4. Grid-sizer配置缺失：未确保grid-sizer的宽度与项目列宽（col-md-4）匹配，导致Isotope计算列数出错。

修复步骤 #

1. 修正HTML结构

去掉.newGallery内部的嵌套row，避免栅格样式冲突：

<div class="row">
  <!-- 筛选按钮 -->
  <div class="newFiltering col-sm-3">
    <span class="full-width mb-35 active" data-filter='filterName'>filterName</span>
  </div>

  <div class="clearfix"></div>

  <!-- 图片画廊 -->
  <div class="newGallery text-center col-sm-9">
    <!-- grid-sizer与项目列宽保持一致 -->
    <div class="grid-sizer col-md-4"></div>
    
    <!-- 重复的项目元素 -->
    <div class="col-md-4 newItems filterName">
      <div class="item-img">
        <img src="[[+image]]" alt="image">
        <div class="item-img-overlay valign">
          <div class="overlay-info full-width vertical-center">
            <h6>[[+name]]</h6>
            <p>[[+body]]</p>
          </div>
          <a href="[[+image]]" class="popimg">
            <i class="icofont icofont-image"></i>
          </a>
        </div>
      </div>
    </div>
    
    <div class="clear-fix"></div>
  </div>
</div>

2. 修正Isotope初始化代码

统一布局模式，修正选择器错误，合并重复的点击事件：

// 仅初始化目标容器，使用masonry网格布局
var $newGallery = $('.newGallery').isotope({
  itemSelector: '.newItems',
  layoutMode: 'masonry',
  percentPosition: true,
  masonry: {
    columnWidth: '.grid-sizer' // 以grid-sizer为列宽基准
  }
});

// 合并筛选与激活状态切换逻辑
$('.newFiltering').on('click', 'span', function() {
  var filterValue = $(this).attr('data-filter');
  $newGallery.isotope({ filter: filterValue });
  $(this).addClass('active').siblings().removeClass('active');
});

3. 确保Grid-sizer样式生效

如果Bootstrap的col-md-4样式未正确应用到grid-sizer，可添加自定义样式兜底：

.grid-sizer {
  width: 33.333%; /* 与col-md-4的宽度百分比一致 */
}
.newItems {
  margin-bottom: 15px; /* 可选：给项目添加底部间距 */
}

修复逻辑说明 #

• 移除嵌套row：消除Bootstrap栅格的负margin对Isotope宽度计算的干扰，确保容器宽度准确。
• 统一布局模式：masonry是适合网格排列的布局模式，配合percentPosition和grid-sizer可精准控制列数。
• 修正选择器：确保所有操作都指向正确的画廊容器，避免重复初始化导致的布局异常。
• 匹配列宽基准：grid-sizer的宽度与项目列宽一致，让Isotope加载后保持初始的3列布局。

内容的提问来源于stack exchange，提问作者Camilo Casadiego