개요

Django에서 웹 애플리케이션을 만드는 동안 프론트 CSS는 Bootstrap을 사용하여 디자인했습니다.

view에서 전달된 목록을 루프로 처리하면서 아코디언을 만들려고 하면,
리스트가 1건일 때의 표시가 이상해져 버렸다.

루프가 2건 이상일 때(정상):


1건의 때(밑줄 끊어져 있고 모서리가 둥글지 않음):


출처:

test.html

<div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
    {% for l in list %}
    <div class="card">
        <div class="card-header" role="tab" id="heading{{ forloop.counter }}">
            <h5 class="mb-0">
                <a class="text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapse{{ forloop.counter }}" role="button" aria-expanded="true" aria-controls="collapse{{ forloop.counter }}">
                    {{ forloop.counter }}
                </a>
            </h5>
        </div>
        <div id="collapse{{ forloop.counter }}" class="collapse" role="tabpanel" aria-labelledby="heading{{ forloop.counter }}" data-parent="#accordion">
            <div class="card-body">
                {{ l }}
            </div>
        </div>
    </div>
    {% endfor %}
</div>

현재의 대처법

리스트가 1건밖에 없는 경우의 분기 처리를 추가해, CSS의 클래스를 추가해 준다.

카드

<div class="card">

↑에

card-border-rounded

<div class="card {% if list|length == 1 %}border rounded{% endif %}">

↑라는 분기를 추가해 주면 1건이라도 깨끗이 표시해 준다.

결론

이걸 해결하는데 1~2시간 걸린 것 같은데...

Django가 아니어도 리스트의 사이즈를 알면 다른 언어/프레임워크라도 할 수 있다고 생각하고, 뭐라면 더 좋은 방법이 있다고 생각한다.

누군가 Bootstrap/CSS에 익숙한 사람이라면 더 똑똑한 방법을 알려주세요 ... (눈물)

덧붙여서 Bootstrap 공식 문서에 있는 소스의 아이템 2와 3을 전부 지워 아이템 1만 남겨도 같은 현상이 일어나기 때문에, 아코디언이 1개만은 사용법은 상정하고 있지 않을까... 마음대로 생각하거나.