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

Question

我的引导导航栏始终在移动设备上可见。无论 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>

标签： htmlcssbootstrap-4ejs

Answer 1

该类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