Bootstrap4响应式视图中导航栏展开不推送内容的解决方法

嘿，这个问题我之前做项目时也碰到过，刚好有个简单有效的解决办法，能让你的导航栏展开时悬浮在所有内容上方，不会把下面的轮播图挤下去。

核心思路 #

你现在用的sticky-top虽然能让导航栏滚动到顶部后固定，但它本质上还是属于文档流的一部分——当你展开响应式菜单时，菜单会在导航栏的下方占用实际空间，自然就会把下面的内容往下推。我们需要把导航栏改成固定定位（fixed-top），让它脱离文档流，这样展开的菜单就会悬浮在内容上方，不会影响页面布局。

具体步骤 #

1. 替换导航栏的定位类
   把导航栏的sticky-top换成fixed-top，修改后的导航栏代码如下：

<nav class="navbar navbar-expand-sm bg-primary navbar-dark fixed-top">
  <div class="container">
    <a href="" class="navbar-brand">
      <img src="images/kick_ass_2.jpg" alt="" class="img-fluid img-thumbnail" style="width: 50px; height: 50px"/>
    </a>
    <button type="button" class="navbar-toggler" data-target="#mainMenu" data-toggle="collapse">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainMenu">
      <ul class="navbar-nav mr-auto">
        <li><a href="" class="nav-link">Home</a></li>
        <li><a href="test.html" class="nav-link">About</a></li>
        <li class="dropdown"><a href="" class="nav-link dropdown-toggle" data-toggle="dropdown">Service</a>
          <ul class="dropdown-menu bg-primary">
            <li><a href="test.html" class="nav-link">Service one</a></li>
            <li><a href="test.html" class="nav-link">Service two</a></li>
            <li><a href="test.html" class="nav-link">Service three</a></li>
          </ul>
        </li>
        <li><a href="" class="nav-link">Gallery</a></li>
      </ul>
      <ul class="navbar-nav">
        <li><a href="" class="nav-link" data-toggle="modal" data-target="#loginModal">Login</a></li>
        <li><a href="" class="nav-link" data-toggle="modal" data-target="#signUpModal">Sign Up</a></li>
      </ul>
    </div>
  </div>
</nav>

2. 给页面内容添加顶部内边距
   因为fixed-top的元素会脱离文档流，下面的内容会跑到导航栏下方被遮挡，所以需要给页面主体或者第一个内容容器添加顶部内边距，值适配导航栏的高度（留点余量更美观）：

/* 可以放在<head>的<style>标签里，或者单独的CSS文件中 */
body {
  padding-top: 70px; /* 可根据你导航栏的实际高度调整，这里适配50px的logo高度 */
}

为什么这样有效？ #

• fixed-top会让导航栏固定在浏览器窗口顶部，始终脱离文档流，不会占用页面的实际空间。
• 展开的响应式菜单是绝对定位在导航栏下方的，会直接覆盖在页面内容之上，而不是把内容往下推。
• 添加的顶部内边距能确保页面内容不会被固定的导航栏遮挡。

这样修改后，你在手机等小屏幕上点击导航按钮展开菜单时，菜单就会悬浮在轮播图上方，再也不会推送下方内容啦～

内容的提问来源于stack exchange，提问作者Mehedi Hasan Methun