Question

我正在使用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>

Answer 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 */
}

Answer 2

您还可以尝试使用bootstrap固定顶层类来修复导航栏，例如

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

Answer 3

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

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

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

理想情况下，根据Bootstrap文档中的建议，主体将具有padding-top。

“固定导航栏的使用位置：固定，表示它们是从导航栏中拉出的 DOM的正常流程，可能需要自定义CSS（例如padding-top ）上，以防止与其他元素重叠。”

body {
  padding-top: 60px;
}

这是asked and answered before。

EDIT

如果要修复导航栏，请使用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>

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

3 个答案: