bootstrap4のnavbarを用いたナビゲーションメニューをスマホで表示させると、ハンバーガーメニューが一段下に落ちてしまう

###スマホで表示させるとハンバーガーメニューボタンが一段下に落ちてしまう
bootstrap4でナビゲーションメニューを作ってみましたので、早速スマホで表示させてみるとなぜかハンバーガーメニューボタンが一段下に落ちてしまいます。
パソコンでは特に問題なく表示されるのですが、横幅を徐々に狭くしていくとある時点で（smよりもう少し狭くしたくらいで）ストンと落ちるんです。

###参考イメージ
まず、lg以上のサイズではこのように表示されます。

続いて、mdやsmだとこんな感じ。

そして、smをさらに狭めていくと……

こうなってしまいます。私のスマートフォン（Google Pixel 3a）だとsmをちょっと狭めたくらいで表示しているようで、ハンバーガーメニューが落ちて表示されてしまいます。
このロゴ画像のサイズ（横幅）を小さくしてやれば ~~大丈夫なのかもしれません~~ 大丈夫でしたが、このロゴ画像を縮小（伸縮）させて一行に収めることはできないものでしょうか？

ちょっと質問用に改変（修正）してはいますが、以下のようなコードです。

PHP
1<div class="container">
2	<nav class="navbar navbar-light">
3		<h1 class="my-0"><a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img class="img-fluid" src="<?php echo get_theme_file_uri(); ?>/images/logo.gif"></a></h1>
4		<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="レスポンシブ・ナビゲーションバー">
5			<span class="navbar-toggler-icon"></span>
6		</button>
7		<div class="collapse navbar-collapse" id="Navber">
8			<ul class="navbar-nav">
9				<li><a class="nav-item nav-link" href="#">メニュー1</a></li>
10				<li><a class="nav-item nav-link" href="#">メニュー2</a></li>
11				<li><a class="nav-item nav-link" href="#">メニュー3</a></li>
12			</ul>
13		</div>
14	</nav>
15</div>

###特に怪しいことをしているつもりは無いのですが……
個人的には、bootstrap4の基本形でやっているつもりなのですが何故かこうなってしまいます。
どなたか何かお気づきの方がおられましたら、お教えいただければ幸いです。

yasutomi

2019/07/08 13:46

問題が発生するHTMLとCSSの記載がないと誰も回答できません。質問には問題が発生するHTMLとCSSの記載をお願いします。

tartnac

2019/07/08 13:50

おっしゃる通りだと思っております。が、すみません。ほぼ上記のコードでかつCSSは純粋なbootstrap4のものなんです。ですのでこれで特に問題が無いということであればそういう仕様なのかな、とあきらめもつきます。

tartnac

2019/07/08 13:52

もしその場合は、「ここの部分にこーいうCSSを追加するといけるよ」的なことがあれば、どうかお教えいただければ幸いです。お手数おかけいたします。

行動規範の内容に同意します

回答2件

.navbarにはdisplay: flexが使用されているので
狭めることでハンバーガーメニューが落ちるのは
CSS flexible boxの仕様です。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

投稿2019/07/08 14:25

yasutomi

総合スコア2937

tartnac

2019/07/08 16:42

なるほどー！やはり仕様でしたか。う～ん……残念です。

行動規範の内容に同意します

自己解決

まさかの自己解決！flex-nowrapを以下の形で追加したら、うまいこといきました！！

PHP
1<div class="container">
2    <nav class="navbar navbar-light">
3        <div class="d-flex flex-nowrap"> <!-- ←これを追加する！ -->
4            <h1 class="my-0"><a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img class="img-fluid" src="<?php echo get_theme_file_uri(); ?>/images/logo.gif"></a></h1>
5            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="レスポンシブ・ナビゲーションバー">
6                <span class="navbar-toggler-icon"></span>
7            </button>
8        </div>
9        <div class="collapse navbar-collapse" id="Navber">
10            <ul class="navbar-nav">
11                <li><a class="nav-item nav-link" href="#">メニュー1</a></li>
12                <li><a class="nav-item nav-link" href="#">メニュー2</a></li>
13                <li><a class="nav-item nav-link" href="#">メニュー3</a></li>
14            </ul>
15        </div>
16    </nav>
17</div>