Я не эксперт по разработке приложений. У меня проблема с bootstrap display flex и фрагментом кода javascript. Ниже приведен фрагмент bootstrap с дисплеем: flex и несколько javascript, которые выполняют некоторые переходы. Когда отображается display: flex, javascript предотвращает отображение окон миниатюр. Я хотел бы использовать оба дисплея: flex и javascript, чтобы мои переходы работали, а блоки flex были одинаковой высоты. Любая помощь приветствуется.
<div id="portfolio">
<div class="container">
<div class="section-title text-center center">
<h2>Some Header</h2>
</div>
<div class="categories">
<ul class="cat">
<li>
<ol class="type">
<li><a href="#" data-filter="*" class="active">All</a></li>
<li><a href="#" data-filter=".web">Web Apps</a></li>
<li><a href="#" data-filter=".app">Blogs</a></li>
<li><a href="#" data-filter=".branding">Code</a></li>
</ol>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="row" style="display: flex">
<div class="portfolio-items">
<div class="col-sm-4 mb-3 web">
<div class="thumbnail">
<div class="caption">
<h4>Some Heading</h4>
<p>Some Content</p>
<div>
<a href="#" class="btn btn-info btn-xs" role="button">Go to App</a>
</div>
</div>
</div>
</div>
<div class="col-sm-4 mb-3 web">
<div class="thumbnail">
<div class="caption">
<h4>Some Heading</h4>
<p>Some Content</p>
<div>
<a href="#" class="btn btn-info btn-xs" role="button">Go to App</a>
</div>
</div>
</div>
</div>
$(window).load(function() {
var $container = $('.portfolio-items');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.cat a').click(function() {
$('.cat .active').removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
});