我正在为朋友开发一个网站并使用mixitup2插件。我面临的问题是，当我过滤它会导致底部跳跃。
这是我的代码：
pip install werkzeug==0.9.4我只是调用mixitup插件，如：
<section id="works" class="portfolio pad-top white-bg">
<div class="container">
<div class="row">
<article class="text-center col-md-8 col-md-offset-2 white-bg services-content">
<div class="page-head">
<h2 class="text-center">Our Work</h2>
<hr class="small">
</div>
</article>
</div>
</div>
<div class="row">
<article class="col-md-12 text-center whitegray-bg works-filter-wrap">
<!-- Portfolio Filters -->
<ul id="projects" class="works-filter portfolio-tab clearfix">
<li><a data-filter="all" class="filter"><span>All</span></a></li>
<li><a data-filter=".anim" class="filter"><span>Animation</span></a></li>
<li><a data-filter=".vfx" class="filter"><span>Visual Effects</span></a></li>
<li><a data-filter=".graphics" class="filter"><span>Graphics</span></a></li>
<li><a data-filter=".web" class="filter"><span>Websites</span></a></li>
</ul>
</article>
</div>
<!-- carousel:ends -->
<!-- Portfolio -->
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<div id="works-container" class="works-container clearfix">
<div class="row">
<div id="project_items" class="column-4 row">
<div class="mix anim column post_block col-sm-3 widget_anim widget_anim_done">
<div class="post-thumb">
<a class="fancybox-thumb" rel="fancybox-thumb" href="img/projects/01.jpg">
<div class="hover-state">
<p class="cont"><i class="fa fa-search"></i></p>
</div>
<img src="img/projects/01.jpg" alt="16" sizes="(max-width: 249px) 100vw, 249px" height="187" width="249"></a>
</div>
<h4><a href="">Fika Bar</a></h4>
<ul>
<li><i class="fa fa-angle-right"></i><a href="">Marketing</a>, <a href="">Print</a></li>
</ul>
</div>
<div class="mix web column post_block col-sm-3 widget_anim widget_anim_done">
<div class="post-thumb">
<a class="fancybox-thumb" rel="fancybox-thumb" href="img/projects/02.jpg">
<div class="hover-state">
<p class="cont"><i class="fa fa-search"></i></p>
</div>
<img src="img/projects/02.jpg" alt="15" sizes="(max-width: 249px) 100vw, 249px" height="187" width="249"> </a>
</div>
<h4><a href="#">Studio Birdsall</a></h4>
<ul>
<li><i class="fa fa-angle-right"></i><a href="#">Design</a>, <a href="#">Typography</a></li>
</ul>
</div>
<div class="mix graphics column post_block col-sm-3 widget_anim widget_anim_done">
<div class="post-thumb">
<a class="fancybox-thumb" rel="fancybox-thumb" href="img/projects/03.jpg">
<div class="hover-state">
<p class="cont"><i class="fa fa-search"></i></p>
</div>
<img src="img/projects/03.jpg" alt="12" sizes="(max-width: 249px) 100vw, 249px" height="187" width="249"> </a>
</div>
<h4><a href="#">The Secret Little Agency</a></h4>
<ul>
<li><i class="fa fa-angle-right"></i><a href="#">Design</a>, <a href="#">Marketing</a></li>
</ul>
</div>
<div class="mix vfx column post_block col-sm-3 widget_anim widget_anim_done">
<div class="post-thumb">
<a class="fancybox-thumb" rel="fancybox-thumb" href="img/projects/04.jpg">
<div class="hover-state">
<p class="cont"><i class="fa fa-search"></i></p>
</div>
<img src="img/projects/04.jpg" alt="midlands" sizes="(max-width: 249px) 100vw, 249px" height="187" width="249"> </a>
</div>
<h4><a href="#">Midlands branding</a></h4>
<ul>
<li><i class="fa fa-angle-right"></i><a href="#">Print</a></li>
</ul>
</div>
<div class="mix vfx column post_block col-sm-3 widget_anim widget_anim_done">
<div class="post-thumb">
<a class="fancybox-thumb" rel="fancybox-thumb" href="img/projects/05.jpg">
<div class="hover-state">
<p class="cont"><i class="fa fa-search"></i></p>
</div>
<img src="img/projects/05.jpg" alt="10" sizes="(max-width: 249px) 100vw, 249px" height="187" width="249"> </a>
</div>
<h4><a href="#">Daredevil</a></h4>
<ul>
<li><i class="fa fa-angle-right"></i><a href="#">Marketing</a></li>
</ul>
</div>
<div class="mix graphics column post_block col-sm-3 widget_anim widget_anim_done">
<div class="post-thumb">
<a class="fancybox-thumb" rel="fancybox-thumb" href="img/projects/06.jpg">
<div class="hover-state">
<p class="cont"><i class="fa fa-search"></i></p>
</div>
<img src="img/projects/06.jpg" alt="9" sizes="(max-width: 249px) 100vw, 249px" height="187" width="249"> </a>
</div>
<h4><a href="#">Flow eight</a></h4>
<ul>
<li><i class="fa fa-angle-right"></i><a href="#">Design</a>, <a href="#">Typography</a></li>
</ul>
</div>
<div class="mix web column post_block col-sm-3 widget_anim widget_anim_done">
<div class="post-thumb">
<a class="fancybox-thumb" rel="fancybox-thumb" href="img/projects/07.jpg">
<div class="hover-state">
<p class="cont"><i class="fa fa-search"></i></p>
</div>
<img src="img/projects/07.jpg" alt="6" sizes="(max-width: 249px) 100vw, 249px" height="187" width="249"> </a>
</div>
<h4><a href="#">Through time</a></h4>
<ul>
<li><i class="fa fa-angle-right"></i><a href="#">Design</a></li>
</ul>
</div>
<div class="mix web column post_block col-sm-3 widget_anim widget_anim_done">
<div class="post-thumb">
<a class="fancybox-thumb" rel="fancybox-thumb" href="img/projects/08.jpg">
<div class="hover-state">
<p class="cont"><i class="fa fa-search"></i></p>
</div>
<img src="img/projects/08.jpg" alt="5" sizes="(max-width: 249px) 100vw, 249px" height="187" width="249"> </a>
</div>
<h4><a href="#">House illustration</a></h4>
<ul>
<li><i class="fa fa-angle-right"></i><a href="#">Design</a>, <a href="#">Marketing</a>, <a href="#">Print</a>, <a href="#">Typography</a></li>
</ul>
</div>
</div>
</div>
<!-- /.row (nested) -->
</div>
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<aside class="call-to-action bg-primary contact" id="contact">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Let's Get In Touch!</h2>
<hr class="light">
<p class="text-faded">Ready to start your next project with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!</p>
</div>
<div class="col-lg-4 col-lg-offset-2 text-center">
<i class="fa fa-phone fa-3x wow bounceIn"></i>
<p class="text-faded">123-456-7890</p>
</div>
<div class="col-lg-4 text-center">
<i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i>
<p class="text-faded">info@abc.com</p>
</div>
</div>
</div>
</aside>
每当我将过滤器从全部更改为网站或任何其他过滤器时，它会导致跳转而不是滑动。
答案 0 :(得分：0)
我找到了解决方案。通过将以下代码添加到css中，可以平滑地删除混蛋效果和页脚幻灯片。
以下是要放在css中的代码：
#container { /*(whatever the id or class you have given)*/
display: -webkit-flex;
-webkit-flex-flow: row wrap;
display: flex;
flex-flow: row wrap;