Bootstrap 4导航栏始终在移动设备上可见

debugcn 发表于 Dev

海克·西蒙扬

我的引导导航栏始终在移动设备上可见。无论navbar-toggler是否折叠。

这是代码。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
 <div class="container">
  <a class="navbar-brand" href="/"><i class="fas fa-blog"></i>  Tech Info</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
  </button>
  <div class="d-flex flex-row-reverse collapse navbar-collapse" id="navbarSupportedContent1">
   <ul class="nav justify-content-end">
     <% if(!user) { %>
      <li class="nav-item">
       <a class="nav-link my-2 my-sm-0" href="/login">Sing In</a>
      </li>
      <li class="nav-item">
       <a class="nav-link btn btn-outline-primary my-2 my-sm-0" href="/register">Sign Up</a>
      </li>
     <% } %>
   </ul>
  </div>
 </div>
</nav>

齐姆

该d-flex班是压倒一切的navbar-collapse行为。如果要反转flex方向，请在nav元素上使用它...

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="/"><i class="fas fa-blog"></i> Tech Info</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent1">
            <ul class="nav justify-content-end flex-row-reverse">
                <li class="nav-item">
                    <a class="nav-link my-2 my-sm-0" href="/login">Sing In</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

演示：https：//www.codeply.com/p/MgNaErmlWm

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。