导航栏切换按钮在 Bootstrap v4.1.3 中不起作用答案

【问题标题】：Navbar Toggle Button Not Working in Bootstrap v4.1.3导航栏切换按钮在 Bootstrap v4.1.3 中不起作用
【发布时间】：2018-09-26 02:07:22
【问题描述】：

我正在使用 BootstrapCDN v4.1.3，我希望我的导航栏始终固定在用户浏览器的顶部。当我将nav div 设置为position: fixed; 时，当浏览器处于桌面模式时，无法单击任何链接，并且当浏览器处于移动模式时，导航栏切换按钮不会下拉。一旦我删除了position: fixed; CSS 属性，导航栏中的一切都正常，除了它不再位于股票视频上方，并且当导航栏菜单在移动浏览器中切换时它会向下推视频。这不是我想要的结果，如果有人能帮助我弄清楚如何让导航栏正常工作，同时在用户浏览器的顶部保持固定位置，我将不胜感激。

nav.navbar {
  background-color: rgba(144, 188, 244, .8) !important;
  position: fixed;/* <---- Causing the navbar issue */
  width: 100%;
}

div.stockVideo {
  padding: 0;
}

#stockVideo {
  width: 100%;
  height: auto;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="css/normalize.css">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link rel="stylesheet" href="css/custom.css">
  <title>Website</title>
</head>

<body>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">
      <img src="media/placeholderLogo.png" width="44" height="44" alt="Logo">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-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="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>
  <!-- Stock video -->
  <div class="container-fluid stockVideo">
    <video autoplay muted loop id="stockVideo">
            <source src="media/stockVideo.mp4" type="video/mp4">
        </video>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <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>

【问题讨论】：

标签： javascript jquery html css bootstrap-4

【解决方案1】：

将导航栏z-index: 属性设置为1 可以解决此问题：

nav.navbar {
  background-color: rgba(144, 188, 244, .8) !important;
  position: fixed;
  width: 100%;

  z-index: 1;
}

我还将padding-top 设置为body 上导航栏的高度，如下所示：

body {
    padding-top: 59px; /* the height of your navbar */
}
nav.navbar {
    top: 0; /* bump the header back to the top */
}

【讨论】：

z-index: 1; 工作。谢谢你。但是，我不想添加 padding-top，因为我希望我的导航栏位于视频顶部。

【解决方案2】：

你也可以试试bootstrap fixed-top类来修复导航栏之类的

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">

【讨论】：

我完全忘记了这一点，因为这是我一段时间以来第一次使用引导程序。这完美地工作并为我节省了几行额外的 CSS。谢谢。

【解决方案3】：

在视频顶部添加填充以允许导航栏高度..

#stockVideo {
  width: 100%;
  height: auto;
  padding-top: 60px;
}

https://www.codeply.com/go/YWnrU7WAXM

理想情况下，body 应该按照 Bootstrap 文档中的建议使用 padding-top...

“固定导航栏使用位置：固定，这意味着它们是从 DOM 的正常流程，可能需要自定义 CSS（例如 padding-top ) 以防止与其他元素重叠。"

body {
  padding-top: 60px;
}

这是asked and answered before。

编辑

如果您想修复导航栏，请使用 Bootstrap fixed-top 类。单独使用 position:fixed 是行不通的，因为您还需要设置 z-index。如您所见，fixed-top 在这里工作：https://www.codeply.com/go/YWnrU7WAXM

<nav class="navbar navbar-expand-lg navbar-light fixed-top bg-light"></nav>

【讨论】：

这不考虑页面上的动态内容或某些页面将具有不同内容的事实。
我希望我的导航栏与股票视频和页面上的所有其他内容重叠，同时保持固定在用户浏览器的顶部，因此我将其设为透明。另外，这个问题以前没有被问过。您在答案底部提到的问题与我的问题不同，因为由于 position: fixed CSS 属性，我的导航栏链接和移动切换器也无法正常工作。
我是说 padding-top 方面之前已经回答过了。如果我认为这个问题是重复的，我会关闭它。如果要修复导航栏，请使用 Bootstrap fixed-top 类。这将设置正确的顶部、右侧、左侧和 z-index。单独使用 position:fixed 是行不通的。