3カラムにする方法

2024年6月8日

3カラムに表示するためには、リスト内のアイテムを順に出力し、3で割り切れる場合に新しい行を開始する必要があります。また、アコーディオンも含めて3カラムに配置します。

以下は、それを実現するためのコード例です。

html
<div class="row">
    {% for parameter in parameters %}
        <div class="col-md-4">
            <div class="mb-3">
                <label for="{{ parameter }}" class="form-label">{{ parameter }}</label>
                <input type="text" class="form-control" id="{{ parameter }}" name="{{ parameter }}"
                       value="{{ request.POST.parameter }}">
            </div>
        </div>
        {% if forloop.counter|divisibleby:3 and not forloop.last %}
</div>
<div class="row">
        {% endif %}
    {% endfor %}
</div>

<!-- アコーディオン -->
<div id="accordion">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
                        aria-controls="collapseOne">
                    追加項目を表示
                </button>
            </h5>
        </div>
        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
                {% for parameter in parameters|slice:"6:" %}
                    <div class="mb-3">
                        <label for="{{ parameter }}" class="form-label">{{ parameter }}</label>
                        <input type="text" class="form-control" id="{{ parameter }}" name="{{ parameter }}"
                               value="{{ request.POST.parameter }}">
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

このコードでは、col-md-4 クラスを使用して、各アイテムを3カラムに配置しています。また、アコーディオン部分も3カラムに含まれています。アコーディオンの内容が表示されない場合は、JavaScriptが正しく読み込まれているか確認してください。