Question

昨天我在示例中实现了navbar-toggle collapsed这样的一个。除了一件事，一切都很好。当我将fadeInRight或slideInRight类从Animate.css动态添加到页面中的某些内容时，整个顶部菜单宽度会根据页面大小调整大小（当元素从右侧滑动时）页面宽度正在变化）。

要清楚，这是我的代码示例：

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

所有这些类都是bootstrap类。下面是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;
       });
    }
});

这是动画的html。

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

当我向width提出header问题时，问题就解决了。但我不想要固定的标题宽度...有人知道如何修复它吗？

使用Animated.css进行Bootstrap导航栏崩溃的奇怪行为

0 个答案: