アイソトープがセンタリングしていません

Question

私はレールにルビーを使用していますが、フロントエンドに問題があります。私は最近、フォームJQuery石積みを同位体に切り替えました。石工では、私のモデル（ピースと呼ばれる）が正しくセンタリングされ、アニメーション化されていました。さて、アイソトープでは、アニメーションは機能していますが、ページの中央ではなく、サイドに向かって起こっています。これをどうすれば解決できますか？

更新：石造コード

これはセンタリングのみ（pieces.jsに）メーソンリーを用いて、作業に使用されたコードです。私はこのレールの宝石から同位体をロードしています：https://github.com/kristianmandrup/masonry-rails。サイトはhttps://www.metallicpalette.com/piecesで閲覧できます。

$(function() { 
return $('#pieces').imagesLoaded(function() { 
    return $('#pieces').masonry({ 
    itemSelector: '.box', 
    isFitWidth: true 
    }); 
}); 
}); 

pieces.js

$(function() { 
    $('#pieces').imagesLoaded(function() { 
    var $grid = $('#pieces').isotope({ 
     itemSelector: '.box', 
     isFitWidth: true, 
     getSortData: { 
     title: function(itemElem) { 
      var title = $(itemElem).find('.title').text(); 
      return title; 
     }, 
     price: function(itemElem) { 
      var rawPrice = $(itemElem).find('.price').text(); 
      var price = parseFloat(rawPrice.replace(/[$\s]/g, '')); 
      return price; 
     } 
     } 
    }); 


    $('.filter-button-group').on('click', 'a', function() { 
     var filterValue = $(this).attr('data-filter'); 
     $grid.isotope({ filter: filterValue }); 
    }); 

    $('.sort-by-button-group').on('click', 'a', function() { 
     var sortByValue = $(this).data('sort-by'); 
     if (sortByValue) { 
     var ascending = true; 
     if ($(this).data('descending') === true) { 
      ascending = false; 
     } 
     $grid.isotope({ sortBy: sortByValue, sortAscending: ascending }); 
     } 
    }); 
    }); 
}); 

index.html.erb（メインページ）

<div class="button-group center" role="group" aria-label="Filter and Sort"> 
    <!-- Sort stuff, this all works --> 
</div> 

<div id="pieces" class="transitions-enabled"> 
    <% @pieces.each do |piece| %> 
    <div class="box panel panel-default <%= piece.genre %>"> 
     <!-- piece content --> 
    </div> 
    <% end %> 
</div> 

pieces.scss

#pieces { 
    margin: 0 auto; 
} 

.box { 
    margin: 5px; 
    width: 214px; 
} 

.box img { 
    width: 100%; 
} 

.panel-default .panel-heading img { 
    width: 100%; 
} 


.isotope, 
.isotope .isotope-item { 
    /* change duration value to whatever you like */ 
    -webkit-transition-duration: 0.8s; 
    -moz-transition-duration: 0.8s; 
     -ms-transition-duration: 0.8s; 
     -o-transition-duration: 0.8s; 
      transition-duration: 0.8s; 
    } 

.isotope { 
    -webkit-transition-property: height, width; 
    -moz-transition-property: height, width; 
     -ms-transition-property: height, width; 
     -o-transition-property: height, width; 
      transition-property: height, width; 
} 

.isotope .isotope-item { 
    -webkit-transition-property: -webkit-transform, opacity; 
    -moz-transition-property: -moz-transform, opacity; 
     -ms-transition-property:  -ms-transform, opacity; 
     -o-transition-property:  -o-transform, opacity; 
      transition-property:   transform, opacity; 
} 

Answer 1

同位体の現在のバージョン（v3）は.isoを必要としませんtope css、FYI。オプションisFitWidthは今fitWidthで、次のように使用：

$('#pieces').imagesLoaded(function() { 
var $grid = $('#pieces').isotope({ 
    itemSelector: '.box', 
    masonry: { 
//columnWidth: 100, // You may need to set this value for your specific layout 
fitWidth: true 
} 
    getSortData: { 
    title: function(itemElem) { 
     var title = $(itemElem).find('.title').text(); 
     return title; 
    }, 
    price: function(itemElem) { 
     var rawPrice = $(itemElem).find('.price').text(); 
     var price = parseFloat(rawPrice.replace(/[$\s]/g, '')); 
     return price; 
    } 
    } 
});