02. bootstrap導航欄居中

<div id="nav" class="container ys-nav-expand-flex">
    <div class="navbar navbar-expand-sm">
        <a href="#" class="navbar-brand" style="font-size: 42px">HONDA</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ns" aria-controls="ns" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="ns">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item mx-3 text-white fa-circle">Home</li>
                <li class="mx-3 text-white">Models</li>
                <li class="mx-3 text-white">Journalism</li>
                <li class="mx-3 text-white">Activities</li>
                <li class="mx-3 text-white">Download wallpaper</li>
            </ul>
        </div>
    </div>
</div>

#nav {
   background-color: #e12241;
}

.navbar-toggler:not(:disabled):not(.disabled) {
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* @media (max-width: 576px) {    <=576的設備 }*/ 

當屏幕寬度大於576時，改變 .navbar 為 display: inline-flex，再設置text-align:center;使導航欄居中
注意：要把這些設置放在@media (min-width: 576px) 里面，
若是把設置放在@media (min-width: 576px)外面：當屏幕尺寸變小(小於 576)時，網頁標題和導航欄按鈕將會緊湊的居中在頁面，影響美觀。

@media (min-width: 576px) {  /* >=576的設備 */
    .navbar {
        display: inline-flex;
    }
    #nav {
        text-align:center;
    }
}

正常電腦端打開網頁樣式：

響應式縮小（屏幕寬度小於576時）