Question

以下是参考代码和一个link to the codepen。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  <title>Parallax Website</title>
</head>

<body>

  <!--Navbar-->
  <div class="container-fluid">
    <nav class="navbar navbar-expand-md fixed-top navbar-dark">
      <a class="navbar-brand" href="#"><i class="fas fa-user-circle"></i>Business Website Name</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navi">
				<span class="navbar-toggler-icon"></span>
			</button>
      <div class="collapse navbar-collapse" id="navi">
        <ul class="nav navbar-nav ml-auto">
          <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">About Us</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
      </div>
    </nav>
  </div>

一切似乎都运行良好，但是由于某种原因，当屏幕缩小时，单击“汉堡包”时不会显示任何列表项。

此外，底部还有一个非常烦人的小白色边距，无论我放置多少个边距：0，我似乎都无法摆脱。啊。

Answer 1

使用正确版本的 Bootstrap 4 JavaScript（不是3.x）。 Codepen使用的是Bootstrap JS 3.x，因此Navbar切换器不起作用。

要删除页脚的边距，请从段落（mb-0）中删除底部边距（<p>）...

<footer>
    <div class="container-fluid footer">
        <p class="feetText mb-0">
            Copyright 2018 © Payton Jewell
        </p>
    </div>
</footer>

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

Bootstrap导航栏切换器在切换时不显示链接？

1 个答案: