登録フォームのフォーム部分を縦並びにしたい

Question

登録フォームのフォーム部分を縦並びにしたいです。

###前提・実現したいこと
登録フォームのフォーム部分を縦並びにしたいです。
現在、登録フォームのフォーム部分が横に並んだりその下に回ったりしています。

このようにフォームを全て縦に並べたいです。

###発生している問題・エラーメッセージ
このように登録フォームのフォーム部分が横に並んだりその下に回ったりしています。

###該当のソースコード

<form class="form-inline" action="{% url 'detail' %}" method="POST">

      <div class="form-group">

        <label for="id_username">ユーザネーム</label>
        
{{ regist_form.username }}

        {{ regist_form.username.errors }}
      </div>


      <div class="form-group">

        <label for="id_email">Eメール</label>
        
 {{ regist_form.email }}
        
 {{ regist_form.email.errors }}

      </div>


      <div class="form-group">

        <label for="id_password">パスワード</label>

         {{ regist_form.password1 }}

         {{ regist_form.password1.errors }}
      </div>


      <div class="form-group">

        <label for="id_password">パスワード（確認）</label>

         {{ regist_form.password2 }}
        
 {{ regist_form.password2.errors }}

        <p class="help-block">{{ regist_form.password2.help_text }}</p>

      </div>


      <button type="submit" class="btn btn-primary btn-lg">登録</button>

      <input name="next" type="hidden"/>

      {% csrf_token %}

    </form>


###試したこと
Flexboxを用いて、cssをそのように書きたいのですが、
https://www.webcreatorbox.com/tech/flexbox-layout　など
横並びにする方法しか見つけられませんでした。
どのように描けばよいのでしょうか？

Comments

[m.ts10806]

現在書かれているcssとcssフレームワークを利用されているようであればフレームワーク名とバージョンも追記してください。

[Lhankor_Mhy]

見た感じ、floatにしてるんじゃないかと思います。ところでmiki00さんやrrrrrrrrさんとは同一人物ですか？

[m.ts10806]

確かに、質問の仕方は若干違いますがソースが同じですね。

[m.ts10806]

私の回答だけで解決に至るとは思えませんけどね・・

Answer 1

普通に表形式にレイアウトしたいのであればテーブルをつかえばいいのでは？

Answer 2

bootstrap利用であればform-inlineをやめるところから調整すれば良いと思います。