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