Bootstrap 4导航栏在iPhone上覆盖页面内容问题求助

这个问题太常见了，根源就在你给导航栏加的fixed-top类——它是脱离文档流的，不会占用页面的正常空间，所以页面主体内容会从浏览器顶部开始渲染，自然就被导航栏挡住了，在iPhone这种小屏设备上会显得特别明显。

下面是两种简单有效的解决方法：

方法1：给页面主体添加顶部内边距 #

直接给body标签加padding-top，值要比你的导航栏实际高度稍大一点，避免内容和导航栏紧贴：

body {
  padding-top: 70px; /* 你的导航栏logo高度是60px，留10px空隙刚好适配 */
}

如果导航栏在不同屏幕尺寸下高度有变化（比如桌面端导航栏更高），可以用媒体查询针对性调整：

/* 移动端（小于768px，对应navbar-expand-md的断点） */
@media (max-width: 767.98px) {
  body {
    padding-top: 70px;
  }
}

/* 桌面端及以上 */
@media (min-width: 768px) {
  body {
    padding-top: 80px; /* 根据你桌面端导航栏实际高度调整 */
  }
}

方法2：给主内容容器添加顶部外边距 #

如果你不想全局修改body的样式，可以给页面的主内容容器（比如包裹主体内容的.container或者自定义的.main-content类）加margin-top：

.main-content {
  margin-top: 70px;
}

额外提示 #

• 你可以用浏览器开发者工具（iPhone上可通过Safari远程调试）精确测量导航栏高度，这样设置的padding/margin值会更精准。
• 移动端导航栏展开时会覆盖内容是Bootstrap折叠导航栏的默认行为，属于正常现象；如果需要展开时内容被推下去，就得改用非固定定位的导航栏，但这会失去导航栏固定在顶部的效果。

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