동위 원소 부트 스트랩 그리드 문제

Question

나는이 하나 개의 사이트에서 페이지에 일하고 있어요 https://i.stack.imgur.com/U99mf.jpg

을하지만, 뭔가 잘못된 것입니다. 이 COL의 차원 또는 JS 매개 변수에 대한인지 나는

이 portfolio.js 모르겠어 ...

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

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> 

내가 부트 스트랩 3 + 동위 원소 v1.5.25

을 사용하고 있습니다

Answer 1

해결! packery 모드를 사용 https://packery.metafizzy.co/

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

HTML

<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>