Bootstrap 4 fixed-top导航栏移动端内容被遮挡问题求解

这个问题我碰到过好多次啦！本质是fixed-top类会让导航栏脱离正常文档流，页面内容不会自动为它预留空间，再加上移动端屏幕紧凑、导航栏默认是折叠状态，就很容易出现内容跑到导航栏后面的情况。下面给你几个靠谱的解决方案：

方法1：匹配默认导航栏高度设置body内边距 #

Bootstrap 4默认折叠状态的导航栏高度是56px，你直接给body加个顶部内边距就能完美避开遮挡：

body {
  padding-top: 56px;
}

要是你给导航栏改了自定义样式（比如调整了内边距、字体大小），就把56px换成你实际的导航栏高度就行。

方法2：响应式内边距适配全场景 #

如果导航栏在大屏和小屏的高度不一样（比如大屏时导航栏展开后更高），用媒体查询做个响应式调整就搞定了：

/* 移动端（屏幕小于768px） */
@media (max-width: 767.98px) {
  body {
    padding-top: 56px;
  }
}
/* 大屏设备（屏幕大于等于768px） */
@media (min-width: 768px) {
  body {
    padding-top: 70px; /* 这里换成你大屏导航栏的实际高度 */
  }
}

这样不管是手机还是电脑端，内容都能乖乖待在导航栏下面。

方法3：用Bootstrap内置间距类快速解决（可选） #

要是不想写自定义CSS，也可以给页面的主内容容器加个mt-5或者mt-md-6这类间距类，不过这种方法不如设置body内边距灵活，得确保容器的margin能覆盖所有场景。

小提醒 #

• 要是你的自定义CSS没生效，大概率是优先级不够被Bootstrap默认样式覆盖了，可以给选择器加个限定（比如body.has-fixed-navbar），或者临时用!important救急（不推荐长期用哦）。
• 如果移动端点击汉堡菜单展开导航栏后，内容又被遮挡了，那可能需要额外监听导航栏的展开/折叠事件，动态调整内边距，但大部分场景下，上面的方法已经能解决初始加载的问题啦。

内容的提问来源于stack exchange，提问作者Ranga Sarin