bootstrap nav bar のハンバーガーメニューが右寄せにならない

Question

前提・実現したいこと

bootstrap nav bar のハンバーガーメニューが右寄せにならない

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> ```ここに言語名を入力 ソースコード ```

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

以下のような記述で右寄せになると思います。

.navbar-togglerの親要素 {
  display: flex;
}
.navbar-toggler {
  margin-left: auto;
}

Comments

[mezale37]

<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container">
<div class="header-left d-flex">
<a class="navbar-brand pt-3 px-3" href="#">
<img src="img/logo (1).png" width="160" alt="ロゴ画像">
</a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav py-3 font-weight-bold">
<a class="nav-item nav-link pr-4" href="#">はじめに <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link pr-4" href="#">料金プラン</a>
<a class="nav-item nav-link pr-4" href="#">サポート</a>
<a class="nav-item nav-link pr-4" href="#">店舗</a>
<a class="nav-item nav-link pr-4" href="#">キャンペーン</a>
</div>
</div>
</div>
<div class="header-right d-none d-md-block">
<div class="navbar-nav py-3 font-weight-bold mr-auto">
<a class="nav-item nav-link pr-4 text-success" href="#">マイページ</a>
<button type="button" class="btn btn-success rounded-pill px-4"><i class="fa fa-pencil pr-2"></i>申し込む</button>
</div>
</div>
</div>
</nav>

親要素にd-flex、navbarにml-autoを追加しましたが、変化ありませんでした…。

[new1ro]

<div class="header-left">要素の外に出す必要がありそうです。
以下でいかがでしょうか?

<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container">
<div class="header-left d-flex">
<a class="navbar-brand pt-3 px-3" href="#">
<img src="img/logo (1).png" width="160" alt="ロゴ画像">
</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav py-3 font-weight-bold">
<a class="nav-item nav-link pr-4" href="#">はじめに <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link pr-4" href="#">料金プラン</a>
<a class="nav-item nav-link pr-4" href="#">サポート</a>
<a class="nav-item nav-link pr-4" href="#">店舗</a>
<a class="nav-item nav-link pr-4" href="#">キャンペーン</a>
</div>
</div>
</div>

<!-- とりあえず .header-left の外に出す -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="header-right d-none d-md-block">
<div class="navbar-nav py-3 font-weight-bold mr-auto">
<a class="nav-item nav-link pr-4 text-success" href="#">マイページ</a>
<button type="button" class="btn btn-success rounded-pill px-4"><i class="fa fa-pencil pr-2"></i>申し込む</button>
</div>
</div>
</div>
</nav>

[mezale37]

できました！！！ありがとうございます！
昨日一日中一人で調べていましたが、すぐに解決してくださり助かりました。
本当にありがとうございました。

[new1ro]

解決できたようで、よかったです！