내비게이션바 기능 추가에서 햄버거가 너비를 안줄였을 때도 있습니다.ㅠ

점프 투 장고 책을 사서 따라해보는 중입니다.
햄버거 작동은 잘 되는데.. 웹 브라우저의 너비를 줄였을 때 햄버거가 나와야하는데
너비를 안줄였을 때도 햄버거형태로 있어요.. 무슨 문제일까요?

dldldl0039 님 561

M 2022년 5월 26일 11:55 오후

댓 글 (2) |

작성하신 HTML코드를 보여주세요. -

박응용님, 2022년 5월 26일 1:31 오전 , 대댓글

@박응용님 답변에 코드를 복붙해놨습니다 ㅠ 혹시 몰라 base.html도 첨부해요.. - dldldl0039님, 2022년 5월 26일 11:57 오후 , 대댓글

목록으로

1개의 답변이 있습니다. 1 / 1 Page

navbar.html

<!-- 내비게이션바 -->
<nav class="navbar navbar-expend-lg navbar-light bg-light border-bottom">
    <a class="navbar-brand" href="{% url 'pybo:index' %}">Pybo</a>
    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse"
            data-target="#navbarNav" aria-controls="navbarNav"
            aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse flex-grow-0" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                {% if user.is_authenticated %}
                <a class="nav-link" href="{% url 'common:logout' %}">
                    {{ user.username }}(로그아웃)
                </a>
                {% else %}
                <a class="nav-link" href="{% url 'common:login' %}">로그인</a>
                {% endif %}
            </li>
        </ul>
    </div>
</nav>

base.html

{% load static %}
<!doctype html>
<html lang="ko">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
    <!-- pybo CSS -->
    <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
    <title>파이보</title>
</head>
<body>
<!-- 내비게이션바 -->
{% include "navbar.html" %}
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
{% block content %}
{% endblock %}
<!-- 기본 템플릿 안에 삽임될 내용 End -->
<!-- jQuery JS -->
<script src="{% static 'jquery-3.6.0.min.js' %}"></script>
<!-- Bootstrap JS -->
<script src="{% static 'bootstrap.min.js' %}"></script>
<!-- 자바스크립트 Start -->
{% block script %}
{% endblock %}
<!-- 자바스크립트 End -->
</body>
</html>

dldldl0039 님

M 2022년 5월 26일 11:54 오후

댓 글 |

댓글 1개 더 보기...

@박응용님 넵 맞습니다. 4.5.3 버전입니다 - dldldl0039님, 2022년 5월 27일 4:05 오전 , 대댓글

@dldldl0039님 작성하신 코드에는 이상이 없어 보이네요.. -

박응용님, 2022년 5월 27일 8:11 오전 , 대댓글

@박응용님 저도 몇번이나 확인해봤는데 틀린 곳이 없더라구요,, 인터넷에도 검색해봤더니 저같은 케이스는 나오지도 않고.. 도저히 알 수가 없어서 게시판에 글을 남기게 됐습니다 ㅠ 해결 할 수있는 방법이 없겠죠,,? - dldldl0039님, 2022년 5월 27일 9:17 오전 , 대댓글

@dldldl0039님 깃허브의 내용은 현재 "점프 투 장고" 개정판의 소스가 올라가 있어서.. 비교해 볼수도 없고 난감한 상황이네요. 부트스트랩 적용부분부터 다시 한번 진행해 보시면 어떨까요? -

박응용님, 2022년 5월 27일 10:10 오전 , 대댓글

@박응용님 네 감사합니다ㅠ 자세히 답변해주셔서 감사해요 - dldldl0039님, 2022년 5월 30일 2:59 오후 , 대댓글