bootstrap-4 - Bootstrap 徽标与移动设备上的导航栏不对齐

Question

这是我当前导航栏的屏幕截图：https ://i.gyazo.com/374a580912788822e83809aa1ed501d3.png

徽标未与导航栏折叠按钮对齐。

这是我的引导代码：

<!--Nav start-->
<nav class="navbar navbar-expand-lg theme-nav fixed-top">
    <div class="container">
      <div class="navbar-brand">
         <a href="index.html"><img src="../assets/images/logo9.svg" alt="logo"></a>
           <button style="margin-left:10%;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainmenu" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"><i class="fa fa-align-justify" aria-hidden="true"></i></span>
           </button>
        </div>
        <div class="collapse navbar-collapse" id="mainmenu">
            <ul class="navbar-nav ml-auto" id="mymenu">
                <li class="nav-item ">
                    <a class="nav-link" href="#about" >How it Works</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="#package" >Pricing</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="#faq" >FAQ</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="#about" >How it Works</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link btn btn-success" href="sign-in.php" style="padding: 10px;margin-top: 12px;color: #fff;background-color: #4cd137;">Login</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link btn btn-success" href="#package" style="padding: 10px;margin-top: 12px;color: #fff;background-color: #4cd137;">Sign Up</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!--Nav end -->

标签： bootstrap-4navbar

Answer 1

我相信您应该在锚标签之前使用按钮标签，然后结束 div 标签，以便将您的品牌与折叠按钮对齐。我希望这对你有用