Bootstrap４のナビゲーションの表示方法について

スマホサイズの時に、見出しとハンバーガーアイコンを一行で表示したいです。

現在Bootstrap4のレスポンシブサイト作成を練習してます。
PCサイズの時は見出しの下にナビゲーションが来る状態で、スマホの時だけ見出しとハンバーガーアイコンが一行で並び、ハンバーガーアイコンをクリックするとアコーディオンメニューでハンバーガーアイコンの下にメニューを表示するようにしたいです。
スマホサイズでハンバーガーアイコンが表示するようにはできましたが、一行で表示出来ず、ハンバーガーアイコンをタップした際メニューも真ん中に来てしまいます。
アドバイスをお願いしたいです。

該当のソースコード

<html lang="ja">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">

		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
		
　　　　<style>
		body {
		font-size: 14px;
		}
		div.contents {
		margin:30px 0px;
		}
		.nav-item {
		border-right: solid 1px #d3d3d3;
		}
		#line {
		border-right:none;
		}
		#nav-menu-4 {
		text-align: center;
		}
		#da {
		max-width:100%;
		margin:0 auto;

		}
		@media screen and (min-width:360px) and ( max-width:767px) { 

			#headermidashi {
				width:90%;
			}
		}
	  </style>

	</head>
<body>
	<header>
	<nav class="navbar navbar-expand-md navbar-light bg-white fixed-top">
		<div class="container-fluid">
			<div class="row w-100">
				<div id="headermidashi"class="col-12 text-center">
					<a href="#">Cookcamp</a>
				</div>
				<div class="col-12 text-right text-md-center top-toggler-icon">
					<button class="navbar-toggler border-white" data-toggle="collapse" data-target="#nav-menu-4">
						<span class="navbar-toggler-icon"></span>
					</button>
					<div class="navbar-collapse text-center collapse" id="nav-menu-4">
						<ul id="da" class="navbar-nav d-inline-flex">
							<li class="nav-item dropdown">
								<a class="nav-link dropdown-toggle" data-toggle="dropdown">新着レシピ</a>
								<div class="dropdown-menu">
									<a href="#" class="dropdown-item">季節野菜の彩り前菜</a>
									<a href="#" class="dropdown-item">簡単かぼちゃスープ</a>
									<a href="#" class="dropdown-item">ヘルシー米粉パン</a>
									<a href="#" class="dropdown-item">ぷりぷりエビ料理</a>
								</div>
							</li>
							<li class="nav-item"><a href="#" class="nav-link">料理から検索</a></li>
							<li class="nav-item"><a href="#" class="nav-link">食材から検索</a></li>
							<li class="nav-item"><a href="#" class="nav-link">旬の料理特集</a></li>
							<li id="line" class="nav-item"><a href="#" class="nav-link">ランキング</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</nav>
	</header>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>

</body>	
</html>

試したこと

見出しとハンバーガーアイコンを一行にする為に、＠mediaを使ってcolを調整してみました。

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

回答1件

d-flex, justify-content-end, mx-* クラスを用いて質問者さんの実現したいことが行えます (動作確認用リンク)。

HTML
1<html lang="ja">
2
3  <head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
7
8    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
9
10    <style>
11      body {
12        font-size: 14px;
13      }
14
15      div.contents {
16        margin: 30px 0px;
17      }
18
19      .nav-item {
20        border-right: solid 1px #d3d3d3;
21      }
22
23      #line {
24        border-right: none;
25      }
26
27      #nav-menu-4 {
28        text-align: center;
29      }
30
31      #da {
32        max-width: 100%;
33      }
34
35      @media screen and (min-width:360px) and (max-width:767px) {
36
37        #headermidashi {
38          width: 90%;
39        }
40      }
41    </style>
42
43  </head>
44
45  <body>
46    <header>
47      <nav class="navbar navbar-expand-md navbar-light bg-white fixed-top">
48        <div class="container-fluid">
49          <div class="row w-100">
50            <div id="headermidashi" class="col-6 col-md-12 text-center">
51              <a href="#">Cookcamp</a>
52            </div>
53            <div class="col-6 col-md-12 text-right text-md-center top-toggler-icon">
54              <button class="navbar-toggler border-white" data-toggle="collapse" data-target="#nav-menu-4">
55                <span class="navbar-toggler-icon"></span>
56              </button>
57            </div>
58            <div class="col-12 navbar-collapse text-center collapse" id="nav-menu-4">
59              <div class="d-flex justify-content-end w-100">
60                <ul id="da" class="navbar-nav d-inline-flex mx-0 mx-md-auto">
61                  <li class="nav-item dropdown">
62                    <a class="nav-link dropdown-toggle" data-toggle="dropdown">新着レシピ</a>
63                    <div class="dropdown-menu">
64                      <a href="#" class="dropdown-item">季節野菜の彩り前菜</a>
65                      <a href="#" class="dropdown-item">簡単かぼちゃスープ</a>
66                      <a href="#" class="dropdown-item">ヘルシー米粉パン</a>
67                      <a href="#" class="dropdown-item">ぷりぷりエビ料理</a>
68                    </div>
69                  </li>
70                  <li class="nav-item"><a href="#" class="nav-link">料理から検索</a></li>
71                  <li class="nav-item"><a href="#" class="nav-link">食材から検索</a></li>
72                  <li class="nav-item"><a href="#" class="nav-link">旬の料理特集</a></li>
73                  <li id="line" class="nav-item"><a href="#" class="nav-link">ランキング</a></li>
74                </ul>
75              </div>
76            </div>
77          </div>
78        </div>
79      </nav>
80    </header>
81
82
83    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
84    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
85
86  </body>
87
88</html>