부트 스트랩 3 - navbar 브랜드가 작동하지 않음

Question

navbar 브랜드 이미지가 408px x 130입니다. 탐색 기능이 브라우저에서 올바르게 보이지만 모바일에서 반응이 좋지 않습니다. 또한 메뉴 버튼이 나타나지 않습니다. 이 스타일은 내가 브랜드 이미지 높이에 대한 탐색에 맞게하기 위해 필요한이

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 클래스가 없으므로 부트 스트랩의 스타일을 상속하지 않습니다.

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

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

당신은 또한 jQuery를하고 부트 스트랩 JS 메뉴

HTML

에 대한 탐색의 전환을 가능하게 추가해야합니다

CSS : 다음을 추가하여이 문제를 해결할 수 있습니다

이미지를 수정하려면 다음 작업을 수행해야합니다.

높이를 .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