行と列のインライン フォームを作成する

Question

ブートストラップ グリッドを学ぼうとしており、2 つの列 (幅の広い列とそれほど幅のない列) を含む行を作成したいと考えています。左側の列にはインラインフォームを配置し、右側の幅の狭い列にはボタン付きの別のフォームを配置します。 2 列の行を持つ Bootstrap の例をコピーし、次に Bootstrap インライン フォーム コードをコピーして列の 1 つに貼り付けましたが、コードを実行するとインラインになりません。これはこれまでの私のコードです:

リーリー

フォーム コントロールはインラインではなく、上下に積み重ねられています。

私のどこが間違っているのかわかる人はいますか?

Answer 1

Bootstrap の古いバージョンのクラスを使用していますが、Bootstrap 5.1 を使用しています。いくつかの変更を加えました: まず、これは .sr-only ではなく、.visual-hidden です。次に、 .form-inline はサポートされなくなったので、クラスを row に変更し、 .col-3 クラスをフォームの子に追加しました。一方の列を他方よりも幅広にしたいとのことなので、両方の列のクラスも変更しました。 Bootstrap のどのリソースを使用しているかわかりませんが、公式ドキュメントを参照することをお勧めします。

リーリー