점프 투 장고[사이드바 관련] 질문입니다.
점프 투 장고[사이드바 관련] 질문입니다.
먼저, 세부사항까지 설명해주셔서 많이 도움이 되고 있습니다.
파이썬도 친숙하지 않은 비전공자지만 하나씩 배워가고 있습니다.
장고 3-10까지 끝낸 후에, 홈페이지를 꾸며보는 것이 재밌어서 여러가지 시도하고 있는데요.
현재 pybo.kr 페이지 소스를 보면서, 퍼블리싱을 연습하고 있습니다.
그런데, Sidebar 설정하는 것을 아무리 해봐도 사이드로 가지 않고 테이블 위에 뜹니다.
혹시 Sidebar 설정하는 과정을 전반적으로 설명 해주시면 정말 감사하겠습니다.
sismis123 님 1169
2020년 9월 14일 6:31 오전
1개의 답변이 있습니다. 1 / 1 Page
안녕하세요
파이보의 레이아웃 구조는 다음과 같습니다.
{% include "navbar.html" %}
<div class="container mt-3">
<div class="row">
<div class="col-sm-12 col-md-3 col-lg-2 p-2">
{% include "sidebar.html" %}
</div>
<div class="col-sm-12 col-md-9 col-lg-10 p-2">
<div id="content" class="border-top border-secondary">
<div class="content_block">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
</div>
{% include "footer.html" %}
브라우저 크기에 따라 사이드바가 위에 올라갈 수 있는데요.
보시면 col-sm 인 경우 사이드바와 게시물 목록이 동일한 크기로 나타나게 되고
중간 크기에서는 3:9, 최대 크기에서는 2:10 으로 표시되게 했습니다.
혹시 테스트하실 때 브라우저 크기를 작게 하고 테스트하신건 아닐까요?
[추가답변]
사이드바는 다음과 같습니다.
<!-- Sidebar -->
<nav id="sidebar" class="border-top border-secondary">
<div class="list-group">
<a class="rounded-0 list-group-item list-group-item-action list-group-item-light {% if category.name == 'qna' %}active{% endif %}" href="{% url 'pybo:question_list' 'qna' %}">질문과답변</a>
<a class="rounded-0 list-group-item list-group-item-action list-group-item-light {% if category.name == 'free' %}active{% endif %}" href="{% url 'pybo:question_list' 'free' %}">자유게시판</a>
<a class="rounded-0 list-group-item list-group-item-action list-group-item-light {% if category.name == 'tip' %}active{% endif %}" href="{% url 'pybo:question_list' 'tip' %}">팁과강좌</a>
<a class="rounded-0 list-group-item list-group-item-action list-group-item-light {% if category.name == 'quiz' %}active{% endif %}" href="{% url 'pybo:question_list' 'quiz' %}">파이썬퀴즈</a>
<a class="rounded-0 list-group-item list-group-item-action list-group-item-light {% if category.name == 'bug' %}active{% endif %}" href="{% url 'pybo:question_list' 'bug' %}">버그및건의</a>
</div>
</nav>
<ul class="my-3 small" style="padding-left:2em;">
<li class="my-1"><a href="https://wikidocs.net/book/1" target="_blank">점프 투 파이썬</a></li>
<li class="my-1"><a href="https://wikidocs.net/book/4223" target="_blank">점프 투 장고</a></li>
<li class="my-1"><a href="https://wikidocs.net/book/4542" target="_blank">점프 투 플라스크</a></li>
</ul>
박응용 님
M 2020년 9월 14일 9:50 오전
