bootstrap4でnavbar内の最後の要素だけを右寄せしたい

実現したいこと

bootstrap4でnavbar内の最後の要素だけを右寄せしたい。

発生している問題

サイトの上部に表示するナビゲーションバー内にロゴ画像、サイトタイトル、現在時刻を表示しようとしています。
この内、現在時刻のみをナビゲーションバー内の右端に表示したいのですが、それができません。
時刻の表示自体はできていますが、全て左詰めで表示されてしまいます。

コード

html
1<nav class="navbar navbar-dark bg-dark sticky-top">
2    <div class="row">
3        <a class="navbar-brand align-self-center" href="#">
4            <img src="images/Logo.png" width="60" height="60" alt="logo">
5        </a>
6        <div class="align-self-center">
7            <span class="d-none d-md-inline-block d-lg-none">siteTitle</span>
8            <span class="d-none d-lg-inline-block d-xl-none" style="font-size: 2rem">siteTitle</span>
9            <span class="d-none d-xl-inline-block" style="font-size: 3rem">siteTitle</span>
10        </div>
11        <!-- 以下の部分を右寄せしたい -->
12        <div class="navbar-text align-self-center">
13            <span id="currentTime" style="padding: 0"> <!-- ここにjavascriptで現在時刻を挿入 --> </span>
14        </div>
15    </div>
16</nav>

試したこと

対象部分にclass="d-flex justify-content-end"などを適用（その他にもいろいろ試しました。）

補足情報

OS:MacOS 10.14.6
IDE:WebStorm 2019.2.4
ブラウザ:google Chrome Version 84.0.4147.105 (Official Build) (64-bit)

以上、よろしくお願いします。

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

回答1件

ベストアンサー

親要素を container-fluid で幅を一杯に広げて、
時刻のブロックは ml-auto で右端に。

html
1<nav class="navbar navbar-dark bg-dark sticky-top">
2    <!-- 以下の部分 row を container-fluid に変更 -->
3    <div class="container-fluid">
4        <a class="navbar-brand align-self-center" href="#">
5            <img src="https://placehold.jp/60x60.png" width="60" height="60" alt="logo">
6        </a>
7        <div class="align-self-center">
8            <span class="d-none d-md-inline-block d-lg-none">siteTitle</span>
9            <span class="d-none d-lg-inline-block d-xl-none" style="font-size: 2rem">siteTitle</span>
10            <span class="d-none d-xl-inline-block" style="font-size: 3rem">siteTitle</span>
11        </div>
12        <!-- 以下の部分を右寄せ ml-autoを追加 -->
13        <div class="navbar-text align-self-center ml-auto">
14            <span id="currentTime" style="padding: 0"> 00:00:00<!-- ここにjavascriptで現在時刻を挿入 --> </span>
15        </div>
16    </div>
17</nav>