2017-03-11 9 views
0

私はnavbarとmediaのクエリに問題があります。普通のロゴから問題のない小さなロゴに切り替えることができます。 visible-smクラスは私の人生についての問題を私に与えています。小さなロゴを余分にすることを余儀なくされ、ナビゲーションを恐怖にさせる権利へのテキストリンクを手に入れることはできません。私は文書で何かを忘れましたか?リンクが767pxのメディアクエリを打つときに使用しているrelaの不動産を減らすのは本当に簡単なことのようです。これが既に回答されている場合は、事前にお詫びします。私はこの問題に固有の質問を見つけることができませんでした。ここで Here be a pictureBootstrap3 Navbar Link Positioning

Here be the Bootply

私のHTMLもここ

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand visible-xs" href="#"><img src="images/logobug.jpg" alt="" /></a> 
    <a class="navbar-brand visible-sm" href="#"><img src="images/logosm.jpg" alt=""></a> 
    <a class="navbar-brand visible-md" href="#"><img src="images/logomd.jpg" alt=""/></a> 
    <a class="navbar-brand visible-lg" href="#"><img src="images/logolg.jpg" alt=" Logo" /></a> 
     </a> 

      </a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right pull-right"> 

       <li><a href="#">HOME</a></li> 
       <li><a href="#"> EVENTS</a></li> 
       <li><a href="#">CONTACT US</a></li> 
       <li><a href="#">DIRECTIONS</a></li> 
       <li><a href="#">SPONSERS</a></li> 
       <li><a href="#">VENUES</a></li> 
       <li><a href="#">ABOUT</a></li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 

は私のCSSこと:ナビゲーションバーを右に行うため

.navbar-right { 
    float: right; 
    margin-right: -25 px; 
} 
+0

作業用のコードを書いたほうがいいですが、ロゴを1つ使用し、メディア画面でサイズを変更できるロゴをたくさん配置している理由はわかりません。 –

+0

問題は、ロゴのサイズが小さくなりすぎて判読できないことです。 – divspan

+0

申し訳ございません、Bootplyのリンクを忘れてしまった。 OPが編集されました。 – divspan

答えて

0

私はあなたが欲しいものだと思う、私は右のプルダウンを削除同じ a forked bootply

+0

これはまさに私が探していたものです、ありがとう! – divspan