質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

解決済

1回答

889閲覧

テキストの間隔を作りたい。

Giants

総合スコア11

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2022/11/09 09:44

前提

お忙しいところ、恐れ入ります。

railsにて検索機能(ransack)を作成中で、
テキストに間隔を空けたいのですが、うまく間隔を作ることができません。
Bootstrapのサイトにて挿入したいテキストボックスがあり、
その通りに入力したつもりですがうまく反映されません。

初歩的なところでの質問となり申し訳ないですが、
ご教示のほどお願い致します。

実現したいこと

ここに実現したいことを箇条書きで書いてください。

  • テキストボックスとの間に間隔を作りたい。

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

[現状]:下記のようにテキストボックスごとの間隔が全くない状態でございます。
Image from Gyazo

[理想]:このように、「投稿」「コメント」「ユーザー」の間に間隔を作りたいです。
Image from Gyazo

該当のソースコード

html.erb

1<div class="collapse navbar-collapse" id="navbarSupportedContent"> 2 <%= search_form_for @q, url: posts_path do |f| %> 3 <ul class="navbar-nav me-auto mb-2 mb-lg-0"> 4 <form class="d-flex"> 5 <%= f.search_field :title_or_body_cont, id: 'search_field_of_post', class: 'form-control', placeholder: '投稿' %> 6 <%= f.search_field :comments_body_cont, id: 'search_field_of_comment', class: 'form-control', placeholder: 'コメント' %> 7 <%= f.search_field :user_profile_name_cont, id: 'search_field_of_user', class: 'form-control', placeholder: 'ユーザー' %> 8 <%= f.submit 'Search', class: 'btn btn-outline-success' %> 9 </form> 10 </ul> 11 <% end %>

試したこと

Bootstrapのサイトを参考にしながら入力しましたが、
サイトのように間隔が作れませんでした。

参考URL:https://getbootstrap.jp/docs/5.0/components/navbar/?

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

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

1行に要素を幅いっぱい広げつつ、隙間を作りたいのであれば<form class="d-flex justify-content-between">...</form>で実現できるのではないかと思います。
https://getbootstrap.jp/docs/5.0/utilities/flex/#justify-content

もし幅を自分で設定したいのなら、f.search_fieldclass: 'form-control'pe-1などを設定しても実現できるかと思います。

投稿2022/11/09 15:33

no1knows

総合スコア3365

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問