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时）