bootstrap5 ２つのフォームを横並びにする

めでたくIEがお亡くなりになったので、Bootstrap4から5に移行しています。

しかし、Bootstrp5ではform-inlineやform-rowやform-groupは廃止になったので、移行した瞬間に横並びにしていたフォームがすべて縦並びになってしまいました。

これでは使えん・・。

そこで下記のやり方を調べてみました。親要素のクラスにrowを指定して、inputなどをcol-autoのdivで包むという方法です。

<form action="#" method="POST" class="row">
  <div class="col-auto">
    <input type="text" class="form-control">
  </div>
  <div class="col-auto">
    <input type="submit" class="form-control">
   </div>
</form>

</div>

</div>

</form>

しかし私の場合は<form>と<form>の横並び、つまり<form>が２つある形なので少し違います。

結論から行きましょう。

こうやりました。

<div class="row">

  <form action="#" method="POST" class="col-auto">
    <div class="row">
      <div class="col-auto">
        <input type="text" name="name" class="form-control">
      </div>
      <div class="col-auto">
        <input type="submit">
      </div>
    </div>
  </form>
  
  <form action="#" method="POST" class="col-auto">
    <div class="row">
      <div class="col-auto">
        <input type="text" name="name" class="form-control">
      </div> 
      <div class="col-auto">
        <input type="submit"> 
      </div> 
    </div>
  </form>

</div>

</div>

</div>

</form>

</div>

</div>

</form>

</div>

親要素に class=”row” を付与、子要素に class=”col-auto” を付与する。これを忠実にやるということですね。

これでうまくいきました。