블로그에서 방명록 구현 중인데
bootstarp4의 카드 가 이쁘더라구요.
그래서 글 하나당 카드 하나씩 배정해서 배치할려고 했고 부트스트랩4 메뉴얼을 보니
<div class="card-columns">
이걸 사용하면 이쁘게 카드가 정렬되서 화면에 맞춰서 나오더라구요. 근데 문제가 있었습니다.
바로 카드 방향이
1 4 7
2 5 8
3 6 9
순서대로 나오는 것입니다...근데 제가 원하는건 저게 아니었어요
순서가
1 2 3
4 5 6
7 8 9
로 나오길 원했어요.
그래서 해결방법을 찾을려고 2시간정도 구글링을 했어요
검색은 bootstrap 4 card columns order 이렇게 했고 저랑 같은 이슈가 많더라구요
스택오버플로우에 가니깐
https://github.com/twbs/bootstrap/issues/17882
이런 링크 까지 나오고 이 링크를 타고 가니깐
라는 외부 라이브러리까지 사용하라는 답까지 나왔는데 제가 원하던게 아니었어요..
그래서 머리를 굴려서 아주 간단한 초등학교 수준으로 구현을 했는데 성공했어요 방법은 바로
{% for p in object_list %}
{% if forloop.counter0|divisibleby:3 %}
<div class="row">
{% endif %}
<div class="col" id="guestbook-id-{{ p.pk }}">
<div class="card bg-light">
<div class="card-body">
<h4 class="card-title">{{p.author}}</h4>
<p class="card-text"><small><i>{{p.created}}</i></small></p>
<p class="card-text">{{p.text}}</p>
</div>
</div>
</div>
{% if forloop.counter0|add:"1"|divisibleby:3 %}
</div>
{% endif %}
{% endfor %}
이렇게 div class="row"를 반복문에서 index를 활용해서 3번에 한번씩 보여주게 설정하는거였어요
물론 나머지 닫기는 /div도 (index +1) % 3 으로 구현한 것이었지요..
이런 해답은 스택오버플로우에도 없고.. 고수님들이 보기에도 아주 쉬운 거지만
응용을 잘 안해본 저에겐 너무 크나큰 성과고 기쁨같아요(방명록 순서정렬가지고 기쁠줄이야)
