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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

526閲覧

ウィンドウを小さくしたときにボタンが下になってしまう。

atmosphere

総合スコア7

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/10/22 05:43

チャットアプリを作成しています。テキストを送信する欄を画面の一番下に作成して、その横に送信ボタンを付けています。問題は、ウィンドウを小さくしたときに、送信ボタンがテキスト欄の下になってしまうことです。チャット欄を一番下に固定するために、navbar-fixed-bottomを使用しています。bootstrapp3なので、一番下に固定する方法がこれしか思いつきませんでした。bootstrap4では下に固定するclassがあるみたいです。bootstrap3を使って、ボタンが下にならないようにするにはどうすればよいでしょうか?横並びにするために、gridシステムとform-inlineを使っています。

_message_form.html.erb

html

1<nav class="navbar navbar-default navbar-fixed-bottom message_form"> 2 <div class="container"> 3 <div class="row"> 4 <div class="col-xs-10"> 5 <form class="form-inline"> 6 <input type="hidden" id="user_name" value="<%=current_user.name%>"> 7 <textarea id="speaker" class="form-control speaker_txt" data-behavior="room_speaker"><%= cookies[:speaker] %></textarea> 8 <button class="btn btn-default chat_sendbtn" type="submit">送信</button> 9 </form> 10 </div> 11 <div class="col-xs-2"> 12 <div style="margin-top:1.5rem;"> 13 <a class="latest" href="#bottom">最新</a> 14 </div> 15 </div> 16 </div> 17 </div> 18</nav>

イメージ説明

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

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

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

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

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

guest

回答1

0

ベストアンサー

Bootstrap3の.form-inlineは画面幅768px以上でしかインラインスタイルにはならないので、<form>style="display: flex;"を適用してみてはいかがですか。

投稿2021/11/03 11:03

編集2021/11/03 11:03
cerfweb

総合スコア1907

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

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

atmosphere

2021/11/04 02:52

うまく動くようになりました。ディスプレイ幅によって変わることがあることを知らなかったので勉強になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問