导航栏固定顶部内的 Bootstrap 4 下拉问题答案

【问题标题】：Bootstrap 4 dropdown issue inside navbar fixed-top导航栏固定顶部内的 Bootstrap 4 下拉问题
【发布时间】：2018-11-09 20:05:28
【问题描述】：

我花了最后一天试图弄清楚为什么当视口改变时导航栏中的下拉菜单不起作用。

如果您通过电话（或开发人员工具）查看该通用示例并将方向旋转为横向，您将看到下拉列表中的链接无法访问。

我试图通过溢出将滚动添加到 .dropdown：滚动！重要但没有成功。我也尝试将其放置在固定位置的顶部，但它不起作用。

我想要的结果是，如果菜单在视图上展开，您可以滚动屏幕（甚至是下拉菜单本身）以查看其他链接。

请注意，当我从导航中删除“fixed-top”类时，它会按预期工作，所以我猜是这样的。

代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    </head>
    <body style="padding-top: 70px;">
        <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
            <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 active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <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
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>          
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>          
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
        <main>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
        </main>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

【问题讨论】：

标签： css bootstrap-4

【解决方案1】：

var fixed = document.getElementById('fixed');

fixed.addEventListener('touchmove', function(e) {

  e.preventDefault();

}, false);

.dropdown-menu {
  max-height: 70vh;
  overflow-y: auto;
}

@media (max-width: 990px) {
  .navbar.fixed-top {
    overflow-y: auto;
    max-height: 100vh;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.5/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<nav id="#fixed" class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <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
                        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
<main>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
</main>

使用 css 设置导航栏的最大高度：

@media (max-width: 990px){
  .navbar.fixed-top{
    overflow-y: auto;
    max-height: 100vh;
  }   
}

【讨论】：

感谢您的回复。我已经尝试过了。它不起作用，因为虽然您可以滚动查看其他链接，但您必须滚动到文档末尾。当你关闭导航时，你就在页面的底部。我无法理解引导程序如何以及在何处忽略自定义 css（如溢出、高度等），用于导航栏固定顶部的下拉菜单。
对不起，我误解了你的问题。如果您希望导航栏滚动条优先于正文滚动条，则需要一些 js。
我愿意采取任何解决方案.. 您的更新仍未解决问题。再次感谢您的好意。我也在 gitub 项目上打开了一个问题。
自定义 css 似乎在 chrome 上工作。 codepen.io/zoiloreyes/pen/KrMdMr你用的是哪个浏览器？
好的……它可以正常工作。尽管现在（终于）下拉列表有滚动，但我仍然看不到横向模式下的所有链接......我将尝试通过 css @media 修复它。再次感谢。