ブートストラップ3 - navbarブランドに反応しない

Question

私は408px x 130のnavbarブランドイメージを持っています。ブラウザではナビゲーションが正しいように見えますが、モバイルでは反応しません。また、メニューボタンは表示されません。これは、スタイルは、私はブランドイメージの高さにNAVにフィットする必要があり、この

navbar { 
    min-height: 130px; 
    line-height: 130px; 
    z-index: 1; 
    height: 130px; 
} 

のうち、純粋なブートストラップCSSで私のナビゲーションバー

<nav class="navbar default-nav"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <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> 
       <a class="navbar-brand" href="/"> <img alt="#{site_title}" src="/images/logo_white.png" /></a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
       <ul class="nav nav-pills navbar-right"> 
        <li><a href="/faq">1</a></li> 
        <li><a href="/about">2</a></li> 
        <li><a href="/contacts">3</a> 
        </li> 
        <li></li> 


        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="loginButton">Accedi</a> 
         <ul id="login-dp" class="dropdown-menu"> 
          <li> 
           <div class="row"> 
            <div class="col-md-12"> 

             <form action="/" method="post" class="form"> 

              <div class="form-group"> 
               <label class="sr-only" for="form-username">Username</label> 
               <input type="text" id="username" name="email" placeholder="Email..." class="form-username form-control" /> 
              </div> 

              <div class="form-group"> 
               <label class="sr-only" for="form-password">Password</label> 
               <input type="password" name="password" placeholder="Password..." class="form-password form-control" id="password" /> 
               <div class="help-block text-right"> 
                <a href="/resetPassword"> <span class="login-link">Password dimenticata?</span> 
                </a> 
               </div> 
              </div> 

              <div class="form-group"> 
               <button type="submit" class="btn btn-primary btn-block">Login</button> 

              </div> 
              <div class="checkbox"> 
               <label> <input type="checkbox" id="rememberme" name="remember-me" /> <span>Ricordami</span> 
               </label> 
              </div> 
             </form> 
            </div> 
            <div class="bottom text-center"> 
             <span>Non sei iscritto?</span> <a class="login-link" href="/register"><strong>Registrati</strong></a> 
            </div> 
           </div> 
          </li> 
         </ul></li> 
       </ul> 
      </div> 
      <!--/.nav-collapse --> 
     </div> 

    </nav> 

です。

問題は...私は携帯電話を使用する場合、ブランドイメージがないメニューボタンが表示されないとロゴはすべての画面を取得して、応答しないということです

JSFiddle

Answer 1

技術ナビゲーションボタンはまだそこにありますが、nav要素には.navbar-defaultクラスがないため、ブートストラップのスタイルを継承していません。次を追加することでこの問題を修正することができます：あなたは、メニューのためのnavトグルを有効にするには、jQueryとブートストラップJSを追加する必要があります

CSS

.navbar-toggle { 
    border-color: #ddd; 
    top: 37px; 
} 

.navbar-toggle .icon-bar { 
    background-color: #888; 
} 

HTML

を

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 

イメージを修正するには、次の操作を行う必要があります（スタイルには

高さを.navbar-brandからautoに設定し、高さを.navbarから削除することができます。また、box-sizingをcontentに変更すると、画像が要素のパディング内に収まるようになります。その後、.img-responsiveクラスをロゴイメージ要素に追加する必要があります。

CSS

.navbar-brand { 
    box-sizing: content-box; 
    height: auto; 
} 

@media (max-width: 767px) { 
    .navbar-brand { 
     max-width: 15em; 
    } 
} 

/* Optional to replace line-height centering */ 
@media (min-width: 768px) { 
    .nav { 
     position: relative; 
     top: 60px; /* (.navbar height/2) - (#navbar height/2) */ 
    } 
} 

HTML

<!-- Add img-responsive class to your logo --> 
<div class="navbar-header"> 
    <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> 
    <a class="navbar-brand" href="/"> 
     <img alt="#{site_title}" src="http://2.228.86.3:8080/images/quipark_logo_white.png" class="img-responsive" /> 
    </a> 
</div> 

ここCodepenの例です：https://codepen.io/raptorkraine/pen/YrKMgg