【Bootstrap】アコーディオンが1つの時にレイアウトが崩れた話

概要

DjangoでWebアプリケーションを作成中、フロントの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のクラスを追加してあげる。

card

<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個だけなんて使い方は想定してないんじゃないかなぁ...と勝手に思ったり。