为什么jquery动画会弄乱boostrap中的nav flexbox属性？

Question

这是我关注的HTML：

<!-- navigation  -->
    <ul class="nav sticky-top flex-row justify-content-center">
      <li class="nav-item">
        <a class="nav-link active text-white" href="#">About Me</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-white" href="#">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-white" href="#">Skills</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-white" href="#">Contact Me</a>
      </li>
    </ul>

我的屏幕显示下面的照片，基于我应用于导航的引导属性，我不应该获得该照片。 那么为什么会这样呢？ JS小提琴Tbh不会像我的页面那样显示堆叠的导航项目。 我不知道为什么

当我取消Jquery时，导航上的所有flexbox属性都起作用。 这是为什么？

$(document).ready(function(){
  $(".nav").delay(5500).slideDown(500);
});

这是我的JS小提琴： https : //jsfiddle.net/apasric4/o17bpw5u/

Answer 1

我无法解决问题，但您可以逃脱。

// css

.nav {
  background-color: black;
  display: none;
  opacity:0;
}

// jquery

   $(document).ready(function(){  
       $(".nav").slideUp();
       setTimeout(function(){ 
         $(".nav").css('opacity',1).slideDown();
       }, 1000);  
    });