드롭 다운 메뉴를 사용하면 탐색 바가 더 커집니다 (모바일에서만 사용)

부트 스트랩에서 작업하는 동안 왼쪽에 뒤로 버튼이 있고 오른쪽에 사용자 환경 설정 및 로그 아웃이있는 드롭 다운이있는 수평 상단 탐색 바를 사용하려고합니다 .드롭 다운 메뉴를 사용하면 탐색 바가 더 커집니다 (모바일에서만 사용)

지금까지 내 코드는 다음과 같다 :

바탕 화면에 완벽하게 작동하지만, 내가 전화, 행동 변화의 검색을하고있을 때, 그리고 네비게이션 바에 키가 있습니다

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 

    <ul class="nav navbar-nav pull-left"> 
     <li><a href="javascript: history.go(-1)"> &lt; Back</a></li> 
    </ul> 

    <ul class="nav navbar-nav pull-right"> 

     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
      Usuario <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu pull-right" role="menu"> 
       <li><a href="/user">User</a></li> 
       <li class="divider"></li> 
       <li><a href="{{logout_url}}">Logout</a></li> 
      </ul> 
     </li> 
    </ul> 

</nav>

누구나 이유가 무엇입니까?

감사

출처

2014-09-04 unaiherran

네비게이션 바에는 부트 스트랩 방법, 모바일에 그 안에 드롭 다운이 포함되어 있습니다. 이 동작을 원하지 않는다면 CSS를 약간 변경해야합니다. bootstrap.css에서 아래를 찾아 아래에 코멘트하거나 삭제하십시오. 그런 다음 당신이 제대로 부트 스트랩의 collapse 기능을 사용하여 생각하지 않는 바탕 화면의 동작

@media (max-width: 767px) 
    .navbar-nav .open .dropdown-menu { 
    /* position: static; */ 
    /* float: none; */ 
    /* width: auto; */ 
    /* margin-top: 0; */ 
    /* background-color: transparent; */ 
    /* border: 0; */ 
    /* -webkit-box-shadow: none; */ 
    /* box-shadow: none; */ 
    } 
}

출처

2014-09-04 15:05:33

감사합니다. 그 사실을 알아 차리기까지 몇 주가 걸릴 것입니다. – unaiherran

있을 것이다. 토글 탐색 섹션을 잊어 버렸습니다. <div class="navbar-header"> 섹션은 모바일 버전의 접이식 메뉴가 포함 된 섹션으로 '브랜드'를 표시하지 않으려는 경우에도 포함해야합니다. 여기에 코드입니다 :

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <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="#">Delicious</a> <!--delete this line if you don't want a brand--> 
    </div> 
    <!-- your menu goes here--> 
    </div> 
</nav>

나는이 정확하게 문제가되지 않습니다 알지만, 부트 스트랩은 모든 부분을 호출하지 않는 이상한 방법으로 깰 수 있다는 것을 발견했습니다. 그래서 이것을 시도하십시오. 부트 스트랩의 드롭 다운은 어쨌든 모바일을위한 것이 아닙니다.

출처

2014-09-04 15:18:04 spasticninja

드롭 다운 메뉴를 사용하면 탐색 바가 더 커집니다 (모바일에서만 사용)

답변

관련 문제