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