bootstrap 4导航栏在div内打开

Question

我在角应用中使用了引导程序4 while (...) { ... try { boolean isReachable = InetAddress.getByName(ipAddr).isReachable(1000); if (isReachable) { result.add(new WifiClient(ipAddr, hwAddr)); } } catch (IOException ee) {//print it? } .... } // end loop 。问题是菜单在div中打开 - 这是我找到的最佳解释！即增加div的大小。

navbar

这是我的应用程序中发生的事情的一个示例，以及基于引导程序KB应该发生什么：

<小时/> bootstrap版本：

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;