Javascript 同位素引导网格问题

我正在做一个网站页面：

我希望获得以下网格结果：

但有点不对劲。我不知道是关于col维度还是js参数

portfolio.js

  var container = jQuery('#portfolio-grid');
  container.isotope({
    itemSelector: '.portolio-item',
    masonry: {
      columnWidth: 100
    }
  });

HTML

皮图拉
我是一位杰出的献身者
皮托里希进化
我是一位杰出的献身者
海蚀形成
立体
我是一位杰出的献身者
钢
我是一位杰出的献身者
艺术设计
我是一位杰出的献身者
穆斯蒂卡塔
我是一位杰出的献身者
势不可挡的精神
我是一位杰出的献身者
Profilo
我是一位杰出的献身者
电视剧
我是一位杰出的献身者
康塔蒂
我是一位杰出的献身者

---

我正在使用Bootstrap 3+同位素v1.5.25解决！使用封隔器模式

HTML

  <div id="portfolio-grid" class="portfolio-grid">

          <!-- For Project Expander -->
          <div class="start-nav"></div>
          <!-- Project 1 -->
          <div id="projects/pittura.html" class="col-md-3 col-sm-6 portolio-item project-expander">
            <div class="portfolio-img"><img src="assets/images/pittura.jpg" class="img-responsive" alt="" /></div>
            <div class="portfolio-overlay"></div>
            <div class="portfolio-details">
              <h4>Pittura</h4>
              <span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
            </div>
          </div>

          <!-- Project 2 -->
          <div id="projects/evoluzioni.html" class="col-md-3 col-sm-6 portolio-item project-expander">
            <div class="portfolio-img"><img src="assets/images/grafiche.jpg" class="img-responsive" alt="" /></div>
            <div class="portfolio-overlay"></div>
            <div class="portfolio-details">
              <h4>Evoluzioni pittoriche</h4>
              <span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
            </div>
          </div>

          <!-- Project 3 -->
          <div id="projects/3d.html" class="col-md-6 col-sm-12 portolio-item project-expander">
            <div class="portfolio-img"><img src="assets/images/resine.jpg" class="img-responsive" alt="" /></div>
            <div class="portfolio-overlay"></div>
            <div class="portfolio-details">
              <h4>Forme pittoriche<br>tridimensionali</h4>
              <span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
            </div>
          </div>

          <!-- Project 4 -->
          <div id="projects/steel.html" class="col-md-3 col-sm-6 portolio-item project-expander">
            <div class="portfolio-img"><img src="assets/images/visi.jpg" class="img-responsive" alt="" /></div>
            <div class="portfolio-overlay"></div>
            <div class="portfolio-details">
              <h4>Steel</h4>
              <span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
            </div>
          </div>

          <!-- Project 5 -->
          <div id="projects/artdesign.html" class="col-md-3 col-sm-6 portolio-item project-expander">
            <div class="portfolio-img"><img src="assets/images/loop.gif" class="img-responsive" alt="" /></div>
            <div class="portfolio-overlay"></div>
            <div class="portfolio-details">
              <h4>Art Design</h4>
              <span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
            </div>
          </div>

          <!-- Project 6 -->
          <div id="projects/musticatower.html" class="col-md-6 col-sm-12 portolio-item project-expander">
            <div class="portfolio-img"><img src="assets/images/scultura2.jpg" class="img-responsive" alt="" /></div>
            <div class="portfolio-overlay"></div>
            <div class="portfolio-details">
              <h4>Mustica Tower</h4>
              <span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
            </div>
          </div>

          <!-- Project 7 -->
          <div id="projects/unstoppable.html" class="col-md-3 col-sm-6 portolio-item project-expander">
            <div class="portfolio-img"><img src="assets/images/land_rover.jpg" class="img-responsive" alt="" /></div>
            <div class="portfolio-overlay"></div>
            <div class="portfolio-details">
              <h4>Unstoppable spirit</h4>
              <span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
            </div>
          </div>

          <!-- Project 8 -->
          <div id="projects/timeline.html" class="col-md-3 col-sm-6 portolio-item project-expander">
            <div class="portfolio-img"><img src="assets/images/nino.jpg" class="img-responsive" alt="" /></div>
            <div class="portfolio-overlay"></div>
            <div class="portfolio-details">
              <h4>Profilo</h4>
              <span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
            </div>
          </div>

          <!-- Project 9 -->
          <div id="projects/video.html" class="col-md-3 col-sm-6 portolio-item project-expander">
            <div class="portfolio-img"><img src="assets/images/video.jpg" class="img-responsive" alt="" /></div>
            <div class="portfolio-overlay"></div>
            <div class="portfolio-details">
              <h4>Video Opere</h4>
              <span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
            </div>
          </div>

          <!-- Project 10 -->
          <div class="col-md-3 col-sm-6 portolio-item">
            <div class="portfolio-img"><img src="assets/images/installazioni.jpg" class="img-responsive" alt="" /></div>
            <div class="portfolio-overlay"></div>
            <div class="portfolio-details">
              <h4>Contatti</h4>
              <span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
            </div>
          </div>

          <!-- For Project Expander -->
          <div class="final-nav"></div>

        </div>

  var container = jQuery('#portfolio-grid');
  container.isotope({
    itemSelector: '.portolio-item',
    packery: {
      gutter: 0
    }
  });

  <script src="assets/js/portfolio.js"></script>
  <script src="assets/js/isotope.pkgd.min.js"></script>
  <script type="text/javascript" src="assets/js/packery-mode.pkgd.min.js"></script>