当我调整屏幕大小时跳跃的徽标

我对html和css仍然很陌生，但我创建了一个网站，并且一切正常。但是当我将屏幕调整为更小的宽度时，我的导航栏中的徽标开始跳跃。从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%; 
}

我发现这个类似的问题Logo Moves All Over The Place When Resize Windows但改变不了什么在我的情况。我也尝试使用媒体查询和margin-left（使用px和％），但似乎没有任何帮助。

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

我忘了提及我正在使用bootstrap。

来源

2016-09-18 Jassi

'navbar navbar-inverse navbar-fixed-top' - 这是Bootstrap网站吗？ – BSMP

是的，我用bootstrap。对不起，我忘了提及 – Jassi

我的建议是，你删除任何设置背景图像的CSS，并将其放置在HTML内的导航菜单中，并带有img标签。

用bootstrap完成这一百万次。

来源

2016-09-18 18:13:22

我试过了。问题依然存在。 :(该徽标仍然跳转 – Jassi

无论如何，你可以上传一个版本，我们可以访问它在浏览器中试用吗？ –

可能是某种类型的媒体查询做到这一点，但直到我看到更好的东西。 –

当我调整屏幕大小时跳跃的徽标

回答

相关问题