2016-09-18 6 views
1

まだhtmlとcssには新しいですが、ウェブサイトを作成したところすべてがうまく動作しますが、画面のサイズを小さくするとナビバーのロゴが飛びぬきます。 1300ピクセルから約1200ピクセルまで画面の左側にプッシュされます。 logo pushed to left side それから内側に飛びます。 logo jumped inそこから(1200px - 760px)それは再び左側にプッシュされ、再びジャンプします。 jumping logo again これは数回あります。画面のサイズを変更したときにロゴが飛び散る

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と%)で作業しようとしましたが、何も助けにはならないと思われます。

私は実際にあなたの助けをここで使用することができます。どうもありがとうございます!

私はブートストラップを使用しています。

+1

'navbar navbar-inverse navbar-fixed-top' - これはブートストラップサイトですか? – BSMP

+0

はいブートストラップを使用しました。申し訳ありませんが、私はそれを試して – Jassi

答えて

0

私のお勧めは、背景画像を設定し、html内のナビゲーションメニューにimgタグを付けるCSSを削除することです。

これを100万回ブートストラップで終了しました。

+0

を言いました。問題は同じままです。 : – Jassi

+0

とにかくアップロードされたバージョンを入手して、ブラウザで試してみることができますか? –

+0

これを行うメディアクエリーのタイプはありますが、 。 –

関連する問題