bootstrap4 指定していない要素がトグルに追加される

Question

前提・実現したいこと

レスポンシブ対応のナビバーの作成をしています。
下記のような画面を作成したいです。

PC表示

スマホ表示

トグルクリック

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

トグルをクリックした際にこのような表示になります。
人型アイコンがトグル内に表示されます。SAMPLE IMAGEの右にのみ表示させたいです。

該当のソースコード

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="/"><img src="images/logo.png"></a>

            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a href="#" class="navbar-brand"><img src="images/guide.png"></a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="navbar-brand"><img src="images/terms.png"></a>
                    </li>
                </ul>
            </div>
            <!--- 人型アイコン --->
            <a href="#" class="navbar-brand"><img src="images/profile.png"></a>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a href="#" class="navbar-brand"><img src="images/logout.png"></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

試したこと

<div class="collapse navbar-collapse" id="navbarNavDropdown">を２つ作成し、 人型アイコンがトグル内に含まれないよう設定しました。

Comments

[miyabi_pudding]

CSSの記載がありませんが、bootstrap以外はCSSは使っていないということでしょうか？
もし、bootstrap以外にも適用しているCSSがあれば、記載して下さい。

[hagiwarasannnnn]

適応しているCSSはありません。
bootstrapのみです。

Answer 1

もしそのようにしたいのであれば、以下のように order-* クラスを使用することが出来ます (動作確認用リンク) 。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown1, #navbarNavDropdown2" aria-controls="navbarNavDropdown1 navbarNavDropdown2" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="/"><img src="https://placehold.jp/50x50.png?text=logo.png"></a>
    <div class="collapse navbar-collapse order-1 order-lg-0" id="navbarNavDropdown1">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="#" class="navbar-brand"><img src="https://placehold.jp/50x50.png?text=guide.png"></a>
        </li>
        <li class="nav-item">
          <a href="#" class="navbar-brand"><img src="https://placehold.jp/50x50.png?text=terms.png"></a>
        </li>
      </ul>
    </div>
    <!--- 人型アイコン --->
    <a href="#" class="navbar-brand"><img src="https://placehold.jp/50x50.png?text=profile.png"></a>
    <div class="collapse navbar-collapse order-1" id="navbarNavDropdown2">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="#" class="navbar-brand"><img src="https://placehold.jp/50x50.png?text=logout.png"></a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Comments

[hagiwarasannnnn]

実現出来ました。ありがとうございます！
data-targetに複数指定できるのですね。

Answer 2

まず、id は重複できないので .navbar-collapse 内に複数のリストを書いたほうがいいでしょう。
.navbar 直下の .container は想定されていないと思うので外すのをおすすめします。
以下のように HTML を変更すると近いものができますが、ログアウトボタンを右に持ってくるためにはさらに CSS が必要になります。

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <!--div class="container"-->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="/"><img src="images/logo.png" alt="logo"></a>
            <!--- 人型アイコン --->
            <a class="navbar-brand ml-lg-auto order-lg-9" href="#"><img src="images/profile.png" alt="????"></a>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a href="#" class="navbar-brand"><img src="images/guide.png" alt="guide"></a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="navbar-brand"><img src="images/terms.png" alt="terms"></a>
                    </li>
                </ul>
                <ul class="navbar-nav order-lg-last">
                    <li class="nav-item">
                        <a href="#" class="navbar-brand"><img src="images/logout.png" alt="logout"></a>
                    </li>
                </ul>
            </div>
        <!--/div-->
    </nav>

@media (min-width: 992px) {
  #navbarNavDropdown {
    display: contents !important;
  }
}

https://getbootstrap.com/docs/4.3/utilities/flex/#auto-margins
https://getbootstrap.com/docs/4.3/utilities/flex/#order

Comments

[hagiwarasannnnn]

こちらでも実現出来ました。ありがとうございます！