Bootstrap5でフォームを横並びにしたい

Tweet

Category css / Tagged bootstrap 2022/05/10

問題

Bootstrap4では .form-inline というのでフォームの要素を横並びにできたのですが、

Bootstrap5では .form-inline, .form-row, .form-group が廃止されていて横に並びません。

どうしましょう？

答え

Bootstrap5に移行するときに問題になる、互換性のない変更ですね。

.form-inline は廃止されているので、そのままだと縦に並びます。

親要素に class=”row” を付与、子要素に class=”col-auto” を付与するのが、対応方法の一つ。

<div class="row">
    <div class="col-auto">...</div>
    <div class="col-auto">...</div>
    <div class="col-auto">...</div>
    <div class="col-auto">...</div>
</div>

もうちょっとお互い寄ってほしいな～というときは、Gutterを狭くするため .g-1 などを指定。

<div class="row g-1">
    <div class="col-auto">...</div>
    <div class="col-auto">...</div>
    <div class="col-auto">...</div>
    <div class="col-auto">...</div>
</div>

上の図だと中央の「～」が、何もしないと上に寄るので、以下のようにすると上下の位置が揃う。

<span class="form-control-plaintext">～</span>

別解

以下のようなクラスを定義して、一つ上の親要素に設定して使うのでも、わりときれいに収まる。

.inline {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.col-auto では画面が狭くなって折り返したときに上下に並んだ要素がくっついてしまうが、これだと gap が効いて上下がくっつかないで隙間がきれいに空く。