jquery动画与手机

Question

我用 jquery 制作了一个动画，其中有 3 个淡入的 div 和一些来自左侧的 h3 并停留在屏幕中间但是当我调整窗口大小时让我们对手机尺寸说字母不会停止在中间但继续前进，我看起来很糟糕。

此外，由于我使用 Bootstrap ，我的导航栏变小了，如果我点击那里，你现在可以点击一个有下拉菜单的按钮，h3 段落会停留在它在 div 上的位置，它会上升(它不跟随 div 但它停留在屏幕的特定部分)。

这是我目前拥有的:

$(document).ready(function() {
  $("#div1").fadeIn(5000, function() {
    $(".what").animate({
      "left": "45%"
    }, 1300);
  });
  $("#div2").fadeIn(3000);
  $("#div3").fadeIn(1500);
});

#what {
  position: absolute;
  left: -40%;
  top: 130px;
}

#div1 {
  display: none;
}

#div2 {
  display: none;
}

#div3 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />



<div id="div1" class="container-fluid bg-1 text-center">
  <h3><a id="what" class="margin what">What Am I?</h3></a>
    <img src="https://thumb.ibb.co/fEchLa/e.jpg" class="img-responsive img-
    circle margin kuklos" style="display:inline" alt="Me" width="350" height="650">
    <h3>I'm A Young Freelancer.</h3>
</div>

Answer 1

尝试给#div1 {position: relative;宽度:100%