引导显示flex和javascript windows.load

我不是前端开发专家。我遇到了引导显示flex和一段javascript代码的问题。下面是一个带有display:flex和一些执行一些转换的javascript的引导代码段。当display:flex出现时，javascript会阻止显示缩略图框。我希望同时使用display: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;
    });

});

某个标题








一些标题
一些内容

一些标题
一些内容

$（窗口）。加载（函数（）{
var$container=$（'.portfolio items'）；
$container.com({
筛选器：'*'，
动画选项：{
持续时间：750，
“线性”，
队列：false
}
});
$（'.cat a'）。单击（函数（）{
$（'.cat.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
变量选择器=$（this.attr（'data-filter'）；
$container.com({
过滤器：选择器，
动画选项：{
持续时间：750，
“线性”，
队列：false
}
});
返回false；
});
});

只需为缩略图类添加显示属性，如果我有问题，这应该会有帮助：

一些标题
一些内容

一些标题
一些内容

只需为缩略图类添加显示属性，如果我有问题，这应该会有帮助：

一些标题
一些内容

一些标题
一些内容

您想用脚本对该按钮执行什么操作？它会转换缩略图框。在我添加显示之前，它可以正常工作：flexI抱歉，无法理解，如果我尝试了您的脚本，它会显示错误谢谢您的帮助。我已经更新了代码，以显示类别转换在htmlIf中出现的位置。如果使用Bootstrap V4，则

.row

类将具有

display:flex

属性。使用

.row

类，您可以添加

.align items-stretch

。这将使所有项目的高度相同。您最好删除

.portfolio items

div，因为

列

应该是

行

的直接子项。您想使用脚本对该按钮执行什么操作？它会转换缩略图框。在我添加显示之前，它可以正常工作：flexI抱歉，无法理解，如果我尝试了您的脚本，它会显示错误谢谢您的帮助。我已经更新了代码，以显示类别转换在htmlIf中出现的位置。如果使用Bootstrap V4，则

.row

类将具有

display:flex

属性。使用

.row

类，您可以添加

.align items-stretch

。这将使所有项目的高度相同。您最好删除

.portfolio items

div，因为

列

应该是

行

的直接子项。

<div class="row" style="display: flex;">
<div class="portfolio-items">
    <div class="col-sm-4 mb-3 web">
        <div class="thumbnail" style="display: inline-flex;">
            <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" style="display: inline-flex;">
            <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>