Twitter bootstrap 使用Animated.css引导导航栏崩溃的奇怪行为

昨天我实现了示例中的这个。除了一件事，一切都很好。当我将

fadeInRight

或

slideInRight

类从动态添加到页面中的某个元素时，整个顶部菜单宽度将根据页面大小调整大小（当元素从右侧滑动时，页面宽度会发生变化）

为了清楚起见，下面是我的代码示例：

<header class="navbar-fixed-top">
    <div class="col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1"> 
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topmenu">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="">
                <img alt="" src="images/logo2.png">
            </a>
        </div>
        <nav id="topmenu" class="collapse navbar-collapse" role="navigation">
            <ul class="nav navbar-right navbar-nav">
                <li class="nav-item"><a class="nav-link" href="">ceník</a></li>
                <li class="nav-item"><a class="nav-link" href="">podmínky</a></li>
                <li class="nav-item"><a class="nav-link" href="#contact">kontakt</a></li>   
            </ul>
        </nav>
    </div>
</header>

切换导航

所有这些类都是引导类。 下面是jQuery代码，它将类添加到应该设置动画的可见元素中

// Plugin @RokoCB :: Return the visible amount of px
// of any element currently in viewport.
// stackoverflow.com/questions/24768795/
;(function($, win) {
    $.fn.inViewport = function(cb) {
       return this.each(function(i,el){
          function visPx(){
             var H = $(this).height(),
             r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
             return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H)));  
          } visPx();
          $(win).on("resize scroll", visPx);
       });
   };
}(jQuery, window));

$("#references > div").inViewport(function(px){
    if(px) {
       var time = 0;
       $("#references > div").each(function() {
          var div = $(this);
          setTimeout(function(){ $(div).addClass("animated fadeInRight")}, time);
          time += 300;
       });
    }
});

<div class="container-fluid">
<section id="references" class="row">
   <h2 class="col-xs-offset-1">Reference</h2>
   <div class="col-xs-10 col-lg-2 col-xs-offset-1 reference">
      <img src="images/sample1.jpg" class="img-circle" width="150" height="150">
      <article>
        <h3>Lorem ipsum</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sapien nunc, commodo et.</p>
      </article>
   </div>
</section>
</div>

//Plugin@RokoCB:：返回可见的px量
//当前在视口中的任何元素的。
//stackoverflow.com/questions/24768795/
;（功能（$，win）{
$.fn.inViewport=函数（cb）{
返回此值。每个函数（i，el）{
函数visPx（）{
var H=$（this）.height（），
r=el.getBoundingClientRect（），t=r.top，b=r.bottom；
返回cb.call（el，Math.max（0，t>0）H-t:（b