hukk
592
2019-06-19 17:42:29 작성 2019-06-19 17:49:02 수정됨
3
1187

장고로 개발하던 도중 기쁜일이 생겼습니다.


블로그에서 방명록 구현 중인데


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

이런 링크 까지 나오고 이 링크를 타고 가니깐 

https://packery.metafizzy.co/

라는 외부 라이브러리까지 사용하라는 답까지 나왔는데 제가 원하던게 아니었어요..


그래서 머리를 굴려서 아주 간단한 초등학교 수준으로 구현을 했는데 성공했어요 방법은 바로

{% 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 으로 구현한 것이었지요..

이런 해답은 스택오버플로우에도 없고.. 고수님들이 보기에도 아주 쉬운 거지만

응용을 잘 안해본 저에겐 너무 크나큰 성과고 기쁨같아요(방명록 순서정렬가지고 기쁠줄이야)


4
0
  • 댓글 3

  • 고뿌
    677
    2019-06-19 18:03:37
    0
  • hukk
    592
    2019-06-19 18:14:58
    0
  • Frudy
    3k
    2019-06-19 18:31:19

    이거시 바로 이쪽 업의 참맛 아니겠어요,

    저도 진작에 컴공으로 틀었어야해요..

    0
  • 로그인을 하시면 댓글을 등록할 수 있습니다.