當我調整屏幕大小時跳躍的徽標

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

無論如何，你可以上傳一個版本，我們可以訪問它在瀏覽器中試用嗎？ –

可能是某種類型的媒體查詢做到這一點，但直到我看到更好的東西。 –

當我調整屏幕大小時跳躍的徽標

回答

相關問題