Q&A
プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）
前提・実現したいこと
bootstrapでボタンを横並びにしたいです。
以下のfavoriteボタンとdeleteボタンを横並びに配置したいのですが、うまくいきません。
form-inline や btn-group で囲んでみたのですが、うまくいきません
発生している問題・エラーメッセージ
ボタンが縦並びになってしまう
該当のソースコード
php, bootstrap
<div> <span class="form-inline"> @include('micropost_favorite.favorite_button', ['user'=>$user]) @if (Auth::id() == $micropost ->user_id) {!! Form::open(['route' => ['microposts.destroy', $micropost->id], 'method' => 'delete']) !!} {!! Form::submit('delete', ['class' => 'btn btn-danger btn-xs']) !!} {!! Form::close() !!} @endif </span> </div>試したこと
form-inline や、btn-groupなど
補足情報（FW/ツールのバージョンなど）
favorite.button とdelete ボタンを横並びに表示させたいです。
「うまく動作しない」「うまくいかない」では何が起きているか伝わりません。「○○のようになるはずなのに××となってしまう」のような形で「ゴール」と「現象（エラーメッセージなども含む）」を明確にしてください。https://teratail.com/help/question-tips#questionTips3-4-1
あとできれば、ブラウザに表示させたときのＨＴＭＬを「ソースを表示」で取得して追記していただけますか？これだけだと再現確認が誰もとれないので。blade上でなく、まずＨＴＭＬを普通に組んで想定通りにいくか試してみると良いです。
一応、ヒントは回答として投稿します。回答を見る前に上記指摘の対応をお願いしますね。
あと、bootstrapのバージョンも明記してください。
ご丁寧にヒントをいただきありがとうございました。無事解決できました。今後質問する際はご指摘いただきました注意点に気をつけます。ありがとうございました。
質問は編集できるので・・都度対応していただけると的確な回答が可能となりますので、よろしくお願いします。
回答1件
0
ベストアンサー
下記のように組むと
html
1<button type="button">ボタン１</button> 2<form> 3<button type="button">ボタン２</button> 4</form>
下記のように表示されます。
ページ全体、入力フォーム全体を囲う使い方が多いためあまり意識されることはありませんが、
formは実はブロック要素なので<div></div>で囲んだのと同じレイアウトになると思っておいて差し支えありません。
form自体をインライン要素指定するか、formの囲う位置を調整すると良いでしょう。
投稿2018/07/06 08:16
総合スコア80850
あなたの回答
tips
プレビュー
