Html 在小屏幕上居中显示导航栏品牌

移动设备上的中心导航栏品牌。我似乎无法将我的navbar品牌集中在移动设备上……我试图使用媒体查询和flexbox属性，但毫无用处……这是否可以通过引导类或自定义css实现？？？谢谢！：）

使用对齐导航栏组件。你还需要一个隐藏的间隔，以推动品牌的移动中心。还要注意从

hidden-*

到

d-*

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="d-flex flex-grow-1">
        <span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on mobile --></span>
        <a class="navbar-brand d-none d-lg-inline-block" href="index.html">
            <img src="//placehold.it/100x30" alt="masslogo">
        </a>
        <a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="index.html">
            <img src="//placehold.it/40" alt="masssmalllogo">
        </a>
        <div class="w-100 text-right">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </div>
    <div class="collapse navbar-collapse flex-grow-1" id="myNavbar">
        <ul class="navbar-nav ml-auto flex-nowrap">
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">How We Help</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">Blog</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">Contact</a>
            </li>
            <li class="nav-item">
                <div class="dropdown"> <a class="nav-link m-2 dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Resources </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <a class="dropdown-item" href="#">Knowledge base</a> <a class="dropdown-item" href="#">Video tutorials</a> <a class="dropdown-item" href="#">Forms</a> </div>
                </div>
            </li>
        </ul>
        <ul class="navbar-nav navbar-btns">
            <a class="search" href="/search">
                ...
            </a>
            <li class="nav-item login">
                ...
             </li>
        </ul>
    </div>
</nav>

...

---

类似问题：

---

好极了！工作得很好！

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="d-flex flex-grow-1">
        <span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on mobile --></span>
        <a class="navbar-brand d-none d-lg-inline-block" href="index.html">
            <img src="//placehold.it/100x30" alt="masslogo">
        </a>
        <a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="index.html">
            <img src="//placehold.it/40" alt="masssmalllogo">
        </a>
        <div class="w-100 text-right">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </div>
    <div class="collapse navbar-collapse flex-grow-1" id="myNavbar">
        <ul class="navbar-nav ml-auto flex-nowrap">
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">How We Help</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">Blog</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">Contact</a>
            </li>
            <li class="nav-item">
                <div class="dropdown"> <a class="nav-link m-2 dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Resources </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <a class="dropdown-item" href="#">Knowledge base</a> <a class="dropdown-item" href="#">Video tutorials</a> <a class="dropdown-item" href="#">Forms</a> </div>
                </div>
            </li>
        </ul>
        <ul class="navbar-nav navbar-btns">
            <a class="search" href="/search">
                ...
            </a>
            <li class="nav-item login">
                ...
             </li>
        </ul>
    </div>
</nav>