text_fieldの後に文字列を入れたい

Question

前提・実現したいこと

ECサイト作成中です。新規商品作成のフォームで商品の価格を入力するtext_fieldタグの後ろに”円”を表示させたいのですが、改行されてしまいます。

発生している問題・エラーメッセージ

<div class="col-sm-7">
            <input class="form-control" type="text" name="item[price]" id="item_price"><span>円</span>
        </div>

該当のソースコード

    <div class="form-group row">
        <%= f.label :price,"税抜き価格",class: "col-sm-2 col-form-label"%>
        <div class="col-sm-7">
            <%= f.text_field :price,class: "form-control" %><span>円</span>
        </div>
    </div>

補足情報（FW/ツールのバージョンなど）

bootstrap -v 4.1

Answer 1

flexを利用して下記でいかがでしょうか？
参考：https://getbootstrap.jp/docs/4.1/utilities/flex/

<div class="col-sm-7 d-flex flex-row">
　　<%= f.text_field :price,class: "form-control" %><span>円</span>
</div>

だめなら上記に追加で<span class="d-block">円</span>で試してみてください。
参考：https://getbootstrap.jp/docs/4.2/utilities/display/

Comments

[koma_05]

flex-rowを利用するといけました。ありがとうございます。

[no1knows]

それは良かったです。