Question

在移动设备上使Navbar品牌居中。我似乎无法让我的导航栏品牌集中在移动设备上...我试图使用媒体查询和flexbox属性无济于事....这是可以通过bootstrap类或自定义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

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

1 个答案: