javascript - Bootstrap显示flex和javascript windows.load

Question

我不是前端开发专家。我遇到了引导显示 Flex 和一段 JavaScript 代码的问题。下面是一个 bootstrap 代码片段，其中包含 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;
    });

});

Answer 1

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

https://codepen.io/dichado/pen/yLyqYLZ

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