引导导航栏无法正常工作[重复]答案

【问题标题】：Bootstrap navigation bar is not working properly [duplicate]引导导航栏无法正常工作[重复]
【发布时间】：2018-03-16 00:59:18
【问题描述】：

我正在学习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>

请问您有什么建议。谢谢你

【问题讨论】：

你的代码？你需要添加它
@MuhammadOmerAslam 哈哈哈抱歉。我添加了代码。
没关系，:) 见下面尼古拉斯的回答

标签： twitter-bootstrap twitter-bootstrap-3 navigationbar

【解决方案1】：

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

需要身体填充

固定导航栏将覆盖您的其他内容，除非您在<body> 的顶部添加填充。试试你自己的价值观或使用我们下面的 sn-p。提示：默认情况下，导航栏的高度为 50px。

body { padding-top: 70px; }

确保在核心 Bootstrap CSS 之后包含它。

【讨论】：