引導3 - 導航品牌響應不工作

Question

我有一個408px x 130的導航欄品牌形象。瀏覽器中的導航看起來正確，但我無法使其在移動設備上響應。此外菜單按鈕不會出現。這是我的導航欄

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

風格是純CSS引導出這個

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

，我需要適應導航品牌形象的高度。

的問題是，當我使用手機，品牌形象的作用是不敏感的，所以菜單按鈕不會出現和標識得到所有的屏幕...

JSFiddle

Answer 1

技術上導航按鈕仍然存在，但由於nav元素沒有.navbar-default類，因此它不會繼承Bootstrap的樣式。

CSS

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

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

您還需要添加jQuery和引導JS啓用菜單

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