Bootstrap 4 - выпадающий список в navbar с фиксированным верхом не прокручивается - PullRequest
Новая
       22

Bootstrap 4 - выпадающий список в navbar с фиксированным верхом не прокручивается

0 голосов
/ 20 марта 2019

я использую начальную загрузку 4 navbar-fixed-top с раскрывающимся списком внутри, и когда выпадающий список выше, чем страница, выпадающий контент не прокручивается.

Я создаю демонстрацию с оригинальными файлами начальной загрузки безлюбые изменения, и есть та же проблема: /

посмотрите в этой демонстрации ...

как я могу решить проблему?это действительно грустно 

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