Question

我正在学习Bootstrap 3来开发我的个人网站。我的导航栏有问题，似乎无法正常工作。

以下是当前情况的屏幕截图

不过，它应该是这样的......

我尝试更改margin-top值，但它也没有用。这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="height:1500px">

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#page1">Page 1</a></li>
      <li><a href="#page2">Page 2</a></li>
      <li><a href="#page3">Page 3</a></li>
    </ul>
  </div>
</nav>

<div class="container" style="margin-top:50px" id="page1">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
</div>

<div class="container" style="margin-top:50px" id="page2">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
</div>

<div class="container" style="margin-top:50px" id="page3">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
</div>


</body>
</html>

请问你有什么建议。谢谢

Answer 1

https://getbootstrap.com/docs/3.3/components/#navbar

需要身体填充

固定的导航栏将覆盖您的其他内容，除非您在<body>的顶部添加填充。尝试自己的价值观或使用下面的代码段。提示：默认情况下，导航栏高50像素。

body { padding-top: 70px; }

确保在核心Bootstrap CSS之后包含此内容。

Bootstrap导航栏无法正常工作

1 个答案: