html - Bootstrap 4 导航栏在 div 内打开

Question

我在 Angular 应用程序中使用 bootstrap 4 navbar。问题是菜单在 div 中打开——这是我找到的最好的解释!即增加 div 的大小。

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="users" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Usrs
            </a>
            <div class="dropdown-menu" aria-labelledby="users">
              <a class="dropdown-item" href="#">u1</a>
              <a class="dropdown-item" href="#">u2</a>
              <a class="dropdown-item" href="#">u3</a>
            </div>
          </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="tickets" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Tickets
        </a>
        <div class="dropdown-menu" aria-labelledby="tickets">
          <a class="dropdown-item" href="#">t1</a>
          <a class="dropdown-item" href="#">t2</a>
          <a class="dropdown-item" href="#">t3</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

这是我的应用程序中发生的事情的示例，以及基于 Bootstrap KB 应该发生的事情:

---

Bootstrap 版本:

Answer 1

在 .navbar-nav .dropdown-menu 类中将 position:static 更改为 position:absolute。

.navbar-collapse .navbar-nav .dropdown-menu {  
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>


<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <div class="navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="users" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Usrs
          </a>
          <div class="dropdown-menu" aria-labelledby="users">
            <a class="dropdown-item" href="#">u1</a>
            <a class="dropdown-item" href="#">u2</a>
            <a class="dropdown-item" href="#">u3</a>
          </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="tickets" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Tickets
        </a>
        <div class="dropdown-menu" aria-labelledby="tickets">
          <a class="dropdown-item" href="#">t1</a>
          <a class="dropdown-item" href="#">t2</a>
          <a class="dropdown-item" href="#">t3</a>
        </div>
      </li>
    </ul>
  </div>
</nav>