2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-03-05

#概要
DjangoでWebアプリケーションを作成中、フロントのCSSはBootstrapを使ってデザインしていた。

viewから渡されたリストをループで処理しながらアコーディオンを作成しようとしたら、
リストが1件の時の表示がおかしくなってしまった。

ループが2件以上の時(正常):
スクリーンショット 2020-03-05 22.31.03.png

1件の時(下線切れてるし角が丸くない):
スクリーンショット 2020-03-05 22.32.04.png

ソース:

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件でも綺麗に表示してくれる。

スクリーンショット 2020-03-05 22.39.47.png

#おわりに
これ解決するのに1〜2時間かけた気がする...

Djangoじゃなくてもリストのサイズがわかれば他の言語/フレームワークでもできると思うし、なんならもっといい方法がある気がする。

誰かBootstrap/CSSに詳しい人いたらもっとスマートな方法教えてください...(涙目)

ちなみにBootstrap公式ドキュメントにあるソースのアイテム2と3を全部消してアイテム1だけ残しても同じ現象が起きるから、アコーディオンが1個だけなんて使い方は想定してないんじゃないかなぁ...と勝手に思ったり。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?