質問: ### スマホで表示させるとハンバーガーメニューボタンが一段下に落ちてしまう bootstrap4でナビゲーションメニューを作ってみましたので、早速スマホで表示させてみるとなぜかハンバーガーメニューボタンが一段下に落ちてしまいます。 パソコンでは特に問題なく表示されるのですが、横幅を徐々に狭くしていくとある時点で(smよりもう少し狭くしたくらいで)ストンと落ちるんです。 ### 参考イメージ まず、lg以上のサイズではこのように表示されます。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/0609ab821f9b3ef7851e301c662ba04f.gif) 続いて、mdやsmだとこんな感じ。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/0ac90c28758e01d382c39f872546a081.gif) そして、smをさらに狭めていくと...... ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/d1adc2bc0326562f773f53ba11de9ef0.gif) こうなってしまいます。私のスマートフォン(Google Pixel 3a)だとsmをちょっと狭めたくらいで表示しているようで、ハンバーガーメニューが落ちて表示されてしまいます。 このロゴ画像のサイズ(横幅)を小さくしてやれば ~~大丈夫なのかもしれません~~ 大丈夫でしたが、このロゴ画像を縮小(伸縮)させて一行に収めることはできないものでしょうか? ちょっと質問用に改変(修正)してはいますが、以下のようなコードです。 ``` メニュー1 メニュー2 メニュー3 ``` ### 特に怪しいことをしているつもりは無いのですが...... 個人的には、bootstrap4の基本形でやっているつもりなのですが何故かこうなってしまいます。 どなたか何かお気づきの方がおられましたら、お教えいただければ幸いです。
回答: まさかの自己解決!flex-nowrapを以下の形で追加したら、うまいこといきました!! ``` メニュー1 メニュー2 メニュー3 ```