Question

我的bootstrap-4导航栏带有＆＃34;汉堡＆＃34;在屏幕的右上角是基于一个bootstrap示例。 折叠和可点击图标都可正常工作，直到屏幕变得非常小（即手机大小），然后停止响应...

观察：

在它停止工作之前，单击图标旁边的菜单仍然会出现，因此当屏幕变小时，似乎某些元素在图标顶部滑动。
当我删除navbar-toggler-right时，图标移到左上角，一切正常......
所有页面都会出现相同的行为，因此它似乎不是导航栏之外的某个元素。

在<button>上设置z = 999，但它不是很干净......

导航栏：

<nav>
<div class="navbar navbar-toggleable-sm transparent navbar-inverse fixed-top" style="position: absolute!important;">
  <button  type="button" class="navbar-toggler navbar-toggler-right collapsed" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="container">
    <!-- Brand -->
    <a class="navbar-brand" href="/">
      <img src="{{ asset('logo-white.png') }}" width="35" height="35" alt="">
    </a>

    <div class="navbar-collapse collapse" id="navbar">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          etc ... 
        </li>
  </ul>

  <!-- Right side (author) -->
  <ul class="navbar-nav ml-auto">
    <!-- Authentication Links -->
    @if (Auth::guest())
      <li class="nav-item">
        <a href="{{ route('login') }}" class="nav-link">Inloggen</a>
      </li>

      <li class="nav-item">
        <a href="{{ route('register') }}" class="nav-link">Registreren</a>
      </li>

    @else
      <li class="nav-item"> 
        <a href="{{ url('/authors') }}/{{ Auth::id() }}" class="nav-link">
          <span class="fa fa-user" style="font-size: 20px;"></span> 
        </a>
      </li>

      <li class="nav-item">
        <a href="{{ route('logout') }}" class="nav-link" 
            onclick="event.preventDefault();
                     document.getElementById('logout-form').submit();">
            <span class="fa fa-sign-out" style="font-size: 20px;">

           </span>
            </a>

            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                {{ csrf_field() }}
            </form>
          </li>
              @endif
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
</nav>

非常感谢任何帮助！

Answer 1

我猜你是在使用Bootstrap的alpha版本，这可能是原因。他们最近released the beta应该更稳定。

在最新版本中，他们已将navbar-toggleable-*替换为navbar-expand-*。看起来他们也删除了navbar-toggler-right。它应默认位于右侧。

Navbar折叠图标仅在非常小的屏幕上响应

1 个答案: