Bootstrap 4-导航栏固定顶部的下拉菜单不可滚动

时间:2019-03-20 12:39:30

标签: twitter-bootstrap drop-down-menu scroll navbar

我使用内部带有下拉菜单的bootstrap 4 navbar-fixed-top,并且当drobdown随页面升高时,下拉菜单的内容不可滚动。

我使用原始引导文件创建了一个演示文件,没有进行任何更改,并且存在相同的问题:/

看看这个演示...

我该如何解决问题?真的很伤心

.container {
  margin-top: 100px;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown with heigh Content
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action 01 of 30</a>
          <a class="dropdown-item" href="#">Action 02 of 30</a>
          <a class="dropdown-item" href="#">Action 03 of 30</a>
          <a class="dropdown-item" href="#">Action 04 of 30</a>
          <a class="dropdown-item" href="#">Action 05 of 30</a>
          <a class="dropdown-item" href="#">Action 06 of 30</a>
          <a class="dropdown-item" href="#">Action 07 of 30</a>
          <a class="dropdown-item" href="#">Action 08 of 30</a>
          <a class="dropdown-item" href="#">Action 09 of 30</a>
          <a class="dropdown-item" href="#">Action 10 of 30</a>
          <a class="dropdown-item" href="#">Action 11 of 30</a>
          <a class="dropdown-item" href="#">Action 12 of 30</a>
          <a class="dropdown-item" href="#">Action 13 of 30</a>
          <a class="dropdown-item" href="#">Action 14 of 30</a>
          <a class="dropdown-item" href="#">Action 15 of 30</a>
          <a class="dropdown-item" href="#">Action 16 of 30</a>
          <a class="dropdown-item" href="#">Action 17 of 30</a>
          <a class="dropdown-item" href="#">Action 18 of 30</a>
          <a class="dropdown-item" href="#">Action 19 of 30</a>
          <a class="dropdown-item" href="#">Action 20 of 30</a>
          <a class="dropdown-item" href="#">Action 21 of 30</a>
          <a class="dropdown-item" href="#">Action 22 of 30</a>
          <a class="dropdown-item" href="#">Action 23 of 30</a>
          <a class="dropdown-item" href="#">Action 24 of 30</a>
          <a class="dropdown-item" href="#">Action 25 of 30</a>
          <a class="dropdown-item" href="#">Action 26 of 30</a>
          <a class="dropdown-item" href="#">Action 27 of 30</a>
          <a class="dropdown-item" href="#">Action 28 of 30</a>
          <a class="dropdown-item" href="#">Action 29 of 30</a>
          <a class="dropdown-item" href="#">Action 30 of 30</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

<div class="container">
  <div class="row">
    <div class="col-2 offset-5">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>

0 个答案:

没有答案