Question

我仍然是html和css的新手，但我创建了一个网站，一切正常Firebase Blog但是当我将屏幕调整到更小的宽度时，导航栏中的徽标开始跳转。从1300px到大约1200px，它被推到屏幕的左侧。然后它向内跳。从那里（1200 px - 760px）它再次被推向左侧并再次跳入。它做了几次。

在760px以下，一切都很好。它看起来应该没有任何跳跃。

我希望徽标留在导航栏的左侧，并留有固定的边距。

很难解释，但我希望你能帮助我。

HTML

     <body>
    <a name="top"></a> 
   <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand smoothScroll animated" href="#top">

CSS

.navbar {
  min-height: 150px;
  border: none !important;
}

nav .navbar-toggle {
  margin: 13px 15px 13px 0;
}

.navbar-brand {
   background: url(../img/logo.png) no-repeat;
   background-size: auto;
  height: 110px;
  width: 60px;
  transition: width 1s;
  margin-top: 18px;
  margin-left: 50px;
}

.navbar-brand img {
  width: auto;
 height: 100%;
}

我发现了类似的问题，但在我的案例中没有任何改变。我还尝试使用媒体查询和margin-left（使用px和％），但似乎没有任何帮助。

我真的可以在这里使用你的帮助。非常感谢你！

我忘了提到我在使用bootstrap。

Answer 1

我的建议是删除任何设置背景图片的CSS并将其放入html中的导航菜单中，并带有img标记。

使用bootstrap完成了这一百万次。

当我调整屏幕大小时，徽标会跳来跳去

1 个答案: