Fatal编程技术网

Twitter bootstrap 引导导航栏工作不正常

twitter-bootstrap twitter-bootstrap-3

Twitter bootstrap 引导导航栏工作不正常,twitter-bootstrap,twitter-bootstrap-3,navigationbar,Twitter Bootstrap,Twitter Bootstrap 3,Navigationbar,我正在学习bootstrap3来开发我的个人网站。 我有一个问题的导航栏，这似乎是不正常工作 下面是当前情况的截图 伊斯泰德，应该是这样的 我试图更改页边距顶部值，但也不起作用。 这是我的代码： <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta nam

我正在学习
bootstrap3
来开发我的个人网站。 我有一个问题的导航栏，这似乎是不正常工作

下面是当前情况的截图

伊斯泰德，应该是这样的

我试图更改
页边距顶部
值，但也不起作用。 这是我的代码：

<!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>


引导示例

    

  • 

  • 

  • 

  • 


Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。
你有什么建议吗。谢谢

需要车身衬垫

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

body{padding top:70px；}

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

您的代码？您需要添加it@MuhammadOmerAslam哈哈哈，很抱歉。我加上了密码。没关系，：）见下面尼古拉斯的答案