У меня есть несколько экземпляров изотопа, работающих на отдельных вкладках. Изотопные функции прекрасно работают на одной вкладке, но когда я переключаю вкладки, мой нижний колонтитул накладывается на изотопный контейнер. он делает это, пока я не нажму на один из параметров изотопного фильтра. как только я нажму один, затем нижний колонтитул сдвинется вниз. Однако, когда я вернусь к предыдущей вкладке, эта вкладка теперь перепутана. вот несколько скриншотов, чтобы показать, что я имею в виду.инициализировать несколько экземпляров изотопа в отдельных вкладках. Вкладки разбивают изотоп
Это то, на что это должно быть похоже. и это то, что нагрузки загружаются как 
Это то, что заканчивается, когда я переключаю вкладки. то, если я нажму на «все», он вернется к нормальному состоянию (я думаю, это то, где изотоп включается?), и если я вернусь к первой вкладке. он сломан, как этот раздел плохой был. 
вот мой HTML и JQuery
$(document).ready(function() {
loadCSS("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
// filtr menu
var navbutton = $('navbutton');
navbutton.on('click', function() {
$(this).siblings().removeClass('open').end().addClass('open');
});
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer'
}
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress(function() {
$grid.isotope('layout');
});
$('#filters').on('click', 'navbutton', function() {
var filtr = $(this).attr('data-filter');
$grid.isotope({
filter: filtr
});
});
$('#filters2').on('click', 'navbutton', function() {
var filtr = $(this).attr('data-filter');
$grid.isotope({
filter: filtr
});
});
$(function(){
$('ul.tabs li:first').addClass('active');
$('.block article').hide();
$('.block article:first').show();
$('ul.tabs li').on('click',function(){
$('ul.tabs li').removeClass('active');
$(this).addClass('active');
$('.block article').hide();
var activeTab = $(this).find('a').attr('href');
$(activeTab).show();
return false;
});
});
});<!-- Image portfolio -->
<!--- tabs --->
<div class="container-fluid">
<div class = "row">
<div class ="col-md-8 col-md-offset-2">
<ul class="tabs">
<li data-toggle="tab"><a href="#tab1">Interior</a></li>
<li><a href="#tab2" data-toggle="tab">Furniture</a></li>
<li><a href="#tab3" data-toggle="tab">Environment</a></li>
</ul>
</div>
</div>
</div>
<!--- end tabs --->
<section class="block">
<article id="tab1">
<div class="container-fluid">
<div class = "row">
<div class ="col-md-8 col-md-offset-2">
<!-- image Filter -->
<gallery-filter id="filters">
<navbutton data-filter=".bedroom">Bedroom</navbutton>
<navbutton data-filter=".kitchen">Kitchen</navbutton>
<navbutton data-filter=".livingroom">Living Room</navbutton>
<navbutton data-filter=".other">Other</navbutton>
<navbutton class="open" data-filter="*">All</navbutton>
</gallery-filter>
<gallery-filter id="filters4">
<navbutton class="open description">filter</navbutton>
</gallery-filter>
<!-- image filter end -->
</div>
</div>
<!-- Gallery -->
<div class = "row">
<div class ="col-md-10 col-md-offset-1">
<div class="grid" id="filters">
<div class="grid-sizer"></div>
<div class="grid-item bedroom">
<!-- images go here -->
</div>
</div>
</div>
<!-- end of gallery -->
</div>
</article>
<article id="tab2">
<div class="container-fluid">
<div class = "row">
<div class ="col-md-8 col-md-offset-2">
<!-- image Filter -->
<gallery-filter id="filters2">
<navbutton data-filter=".chair">Chairs</navbutton>
<navbutton data-filter=".table">Tables</navbutton>
<navbutton data-filter=".dresser">Dressers</navbutton>
<navbutton data-filter=".bed">Beds</navbutton>
<navbutton class="open" data-filter="*">All</navbutton>
</gallery-filter>
<gallery-filter id="filters3">
<navbutton class="open description">filter</navbutton>
</gallery-filter>
<!-- image filter end -->
</div>
</div>
<!-- Gallery -->
<div class = "row">
<div class ="col-md-10 col-md-offset-1">
<div class="grid" id="filters2">
<div class="grid-sizer"></div>
<div class="grid-item chair">
<!-- images go here -->
</div>
</div>
</div>
<!-- end of gallery -->
</div>
</article>
</section>
<!-- End Image portfolio -->, глядя через переполнение стека я нашел этот пост: Making a jQuery Isotope layout initialize inside a Bootstrap Tab
Я попробовал код:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('.grid').isotope('layout');
});
но я не был уверен, что заменить shown.bs.tab с и не смог заставить его работать. поскольку этот код применяется к вкладкам бутстрапа (который я не использую)
любая помощь приветствуется. Благодарю вас