bootstrap4 のレイアウト方法について

Question

こちらのサイトを参考に動的にフォームを追加するコードを勉強しているのですが、レイアウトがうまくいかず質問させていただきました。

{% extends 'app/base.html' %}

{% block content %}
<div class="container">
<form action="" method="post" enctype="multipart/form-data">
    <h2>記事</h2>
    {{ form.as_p }}

    <h2>添付ファイル</h2>
    {{ formset.management_form }}
    <div id="file-area">
        <div class="form-row">
            <div class="col-6">
            {% for file_form in formset %}
            {{ file_form.as_p }}
            <hr>
            {% endfor %}
            </div>
        </div>
    </div>
    {% csrf_token %}
    <button type="submit" class="btn btn-primary">送信</button>
    <button id="add" type="button" class="btn btn-primary">ファイルの追加</button>
</form>
</div>
{% endblock %}

{% block extrajs %}
<script>
$(function(){
    var totalManageElement = $('input#id_file_set-TOTAL_FORMS');
    var currentFileCount = parseInt(totalManageElement.val());
    $('button#add').on('click', function(){
        var nameElement = $('<input>', {
            type: 'name',
            name: 'file_set-' + currentFileCount + '-name',
            id: 'id_file_set-' + currentFileCount + '-name',
        });
        var fileElement = $('<input>', {
            type: 'file',
            name: 'file_set-' + currentFileCount + '-src',
            id: 'id_file_set-' + currentFileCount + '-src',
        });
        $('div#file-area').append(nameElement);
        $('div#file-area').append(fileElement);
        currentFileCount += 1;
        totalManageElement.attr('value', currentFileCount);
    });
});
</script>
{% endblock %}

bootstrap4を使って、添付ファイルから下に表示されているものを2列で表示させたいのですが左側にだけしか表示されませんでした。どうすれば右側にも表示させることができますか？
よろしくお願いいたします。
![

Answer 1

簡単なのは grid を使って、

<div class="row">
  <div class="col">
    左側の表示内容
  </div>
  <div class="col">
    右側の表示内容
  </div>
</div>
～以下行数分繰り返し

とやることですが、現状の JavaScript はそのような構造を構築していませんから、そりゃ縦並びになりますねとしか。

        $('div#file-area').append(nameElement);
        $('div#file-area').append(fileElement);

これにより、どのような HTML が形成されたか、確認されましたか？

Comments

[Mario_11]

javascriptの構造まで理解していませんでした。勉強になりました、ありがとうございます！