ナビゲーションバーが折りたたまれているときの画像を表示

Question

私はBootstrap3を使用しています。私はnavbarのロゴを持っていますが、navbarが折りたたまれているときだけロゴを表示したいと思っています。私はあまりにも多くのドロップダウンを持っているので、navbarが崩壊していないときには、ロゴは収まりません。

私はもともとvisible-xsクラスですが、これは正しくナビゲートされていないので、ナビゲーションバーにカスタムの折りたたみポイントがあります。

navbarが折りたたまれている場合にのみ画像を表示する方法はありますか？

<nav class="navbar navbar-default navbar-static-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <div class="row"> 
        <div class="col-xs-4"> 
         <a href="#" class="navbar-left"><img src="Images/Logo_small.gif"></a> 
        </div> 
        <div class="col-xs-8"> 
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
          <span class="sr-only">Toggle navigation</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
        </div> 
       </div> 
      </div> 

Answer 1

第一理解：あなたが言及として メニューが消えたときにあなたのロゴが消えることをしたい場合、そのハンバーガーのバージョンでは、CSSメディアクエリで、いくつかのCSSルールを追加することができ、BSのデフォルトのクラスvisible-xsを使用せずに表示され

@media (min-width: custom collapse point-min) and (max-width: custom collapse point-max) { 
    .navbar-collapse { 
     .logotohide { display: none; } // or opacity: 0 or whatever 
    } 
} 

したがって、カスタムポイントが括りとロゴの隠しのために同じであれば、これは仕事をします。

第2の理解： 通常、あなたのnavbarはあなたがそれを開いたとき（responsivハンバーガーメニューアイコンで）新しいクラスを持つでしょう。次に、cssを使用して、この特定のクラスでnavbarの要素を非表示にすることができます。例えば

：あなたのナビゲーションバーには、その折りたたまれた状態の新しいクラスを持つことになりますと、2番目のCSSルールは、電源を取る

.navbar-collapse.collapse { 
     .logotohide { display: none; } // or opacity: 0 or whatever 
     // using LESS 
     &.in { .logotohide { display: block; } } 
    } 
    // without LESS 
    .navbar-collapse.collapse.in { 
     .logotohide { display: block; } // or opacity: 1 or whatever 
    } 

！