메뉴가 작은 장치에 무너지고하지 않으면

그것은 모든 목록 항목의 내부에 대한 이해이다. 나는 몇 시간 동안 아래의 코드 문제를 해결 한 그것은 작동하지 않는 이유를 찾을 수 없습니다 :메뉴가 작은 장치에 무너지고하지 않으면

<header> 
    <link href="{{ STATIC_URL }}css/bootstrap.min.css" type="text/css" rel="stylesheet" /> 
    <link href="{{ STATIC_URL }}css/cloudserv.css" type="text/css" rel="stylesheet" /> 
    <link rel="shortcut icon" type="image/png" href="{{STATIC_URL}}/img/favicon.ico"/> 
</header> 

<div class="navbar navbar-default navbar-static-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="/"><img src="{{ STATIC_URL }}img/logo.png"></img></a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     {% for category in main_menu %} 
     {% if category.item_set.all %} 
     <li class="dropdown"> 
      <a href="{{ category.url_name }}" class="dropdown-toggle" data-toggle="dropdown">{{ category.name }}<b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a href="/{{ category.url_name }}">{{ category.name }}</a></li> 
      <li class="divider"></li> 
      {% for item in category.item_set.all %} 
      <li><a href="/{{ category.url_name }}/{{ item.url_name }}">{{ item.name }}</a></li> 
      {% endfor %} 
      </ul> 
     </li> 
     {% else %} 
     <li><a href="/{{ category.url_name }}">{{ category.name }}</a></li> 
     {% endif %} 
     {% endfor %} 
     </ul> 
    </div> 
    </div> 
</div> 

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="{{ STATIC_URL }}js/jquery-1.11.1.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>

는 괄호 안에 포함 된 모든 코드가 장고의 템플릿 시스템과 관련이 있습니다. 또한 관련된 모든 부트 스트랩 파일이 포함되어 있으며 메뉴의 다른 모든 측면이 정상적으로 작동하는 것 같습니다.

출처

2014-11-07 socialdtk

.navbar-toggle의 data-target 속성은 collapse div를 타겟팅해야합니다.

또한 메타 누락 : 그것은 navbar의 ID를 가지고 있기 때문에 당신은

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">

후 업데이트를하기 전에 data-target="#navbar"

같은 CSS 스타일 선택기를 사용하여 타겟팅 할 수 있습니다 아래에있는 태그 head.

<meta name="viewport" content="width=device-width, initial-scale=1">

당신은 다른 모바일 브라우저가 축소되고 당신은 이동 중단 점을받지 않습니다, 모바일 장치에 대한이 필요합니다.

출처

2014-11-07 04:10:24 Schmalzy

코드를 제안대로 편집하려고 시도했지만 여전히 작동하지 않습니다. 또한 navbar-collapse div를 navbar-collapse 축소 navbar-responsive-collapse "로 변경해 보았습니다. – socialdtk

@socialdtk이 예제를보십시오. http://jsfiddle.net/SchmalzyB/y372tcwe/, 코드와 함께 작동합니다. 변경) .bootstrap.js 파일 앞에 jQuery도 포함 했습니까? – Schmalzy

@socialdtk 포함 된 파일이 올바른 것처럼 보입니다. 그러나 서버 측 코드 대신 실제 HTML 출력을 보는 것이 더 도움이됩니다. – Schmalzy

메뉴가 작은 장치에 무너지고하지 않으면

답변

관련 문제