小屏幕上的中心导航栏品牌

Question

在移动设备上居中导航栏品牌。我似乎无法将我的导航栏品牌集中在移动设备上......我试图使用媒体查询和 flexbox 属性无济于事......这可以通过引导类或自定义 css 实现吗？谢谢！ :)

<nav class="navbar navbar-expand-lg navbar-default fixed-top nav-menu navbar- 
light bg-white">
<div class="container">
<div class="header-border">
<a class="navbar-brand hidden-sm-down" href="index.html">
<img src="/images/logo.png" alt="masslogo">
</a>
<a class="navbar-brand-two hidden-md-up" href="index.html">
<img src="/images/mpsmall.png" alt="masssmalllogo">
</a>

</div>
<button class="navbar-toggler nav-button" type="button" data-toggle="collapse" data-target="#myNavbar">
<div class="bg-dark line1"></div>
<div class="bg-dark line2"></div>
<div class="bg-dark line3"></div>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-nav ml-auto">
<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"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="img">
<title>Search</title>
<path d="M914.876 846.934l-226.894-226.92c93.082-124.27 83.508-301.176-29.516-414.14-61.952-61.97-143.146-92.954-224.366-92.954s-162.414 30.984-224.384 92.954c-123.922 123.922-123.922 324.812 0 448.768 61.97 61.934 143.146 92.936 224.366 92.936 66.918 0 133.624-21.368 189.772-63.402l226.952 226.936 64.07-64.178zm-480.794-190.038c-60.536 0-117.486-23.604-160.238-66.414-88.38-88.362-88.38-232.174-.018-320.538 42.828-42.812 99.72-66.398 160.298-66.398 60.536 0 117.486 23.56 160.256 66.398 88.32 88.38 88.32 232.174 0 320.538-42.87 42.81-99.762 66.414-160.298 66.414z">

</path></svg></a><li class="nav-item login"><a class="btn btn-success
btn-cust" href="https://masspay.myisolved.com/UserLogin.aspx?ReturnUrl=%2f"><span class="fa fa-user-circle mr-1"></span>Client Login</a></li></ul>
</div>

</nav>

Answer 1

使用flex utility classes 对齐导航栏组件。您还需要一个隐藏的垫片来推动品牌以移动设备为中心。还要注意 display classes have changed 从 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>

https://www.codeply.com/go/w13DoSZyVc

---

类似问题：
Center an element in Bootstrap 4 Navbar
Bootstrap 4 Navbar align logo center and toggle icon on the left