Bootstrap 3导航栏显示异常，寻求解决方案

我一眼就看出你遇到的核心问题了：用了navbar-fixed-top固定导航栏后，页面内容被导航栏挡住，给每个容器单独加margin-top的方式不仅没解决遮挡，还导致容器间距变得过大。

问题根源 #

navbar-fixed-top这个类会让导航栏脱离正常文档流，固定在浏览器视口的最顶部。此时页面内容会默认从视口顶端开始渲染，自然就会被导航栏覆盖。你给每个容器加margin-top:50px，一来会让容器之间的垂直间距变得冗余，二来第一个容器的margin-top是相对于body顶部计算的，根本躲不开导航栏的遮挡范围。

可行解决方案 #

我们只需要调整body的内边距，把整个页面内容统一向下推，避开固定导航栏的空间就可以了，具体步骤如下：

• 移除所有<div class="container">上的style="margin-top:50px"属性
• 给body添加padding-top:70px（这个值比Bootstrap 3导航栏默认的50px高度稍大，能让内容和导航栏之间保留合适的留白，视觉上更舒适）

修改后的完整代码 #

<!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; padding-top:70px">
<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" 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" 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" 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>

额外优化提示 #

如果你希望容器之间保持适度的垂直间距，可以给除第一个容器外的其他容器添加margin-top:30px（或者你觉得合适的数值），这样既不会被导航栏遮挡，页面布局也会更协调。

内容的提问来源于stack exchange，提问作者Hajar Elkoumikhi