MVC默认Bootstrap导航栏在768-991px遮挡内容，如何让页面下移？

这个问题我之前帮好几个开发者排查过，Bootstrap在sm断点（也就是768px到991px这个宽度范围）下导航栏遮挡内容，大多是因为固定定位的导航栏没有给页面主体留出足够的顶部空间，或者导航栏在这个宽度下因为菜单换行导致高度意外增加。下面给你几个直接可用的解决方案：

方案1：针对目标宽度区间添加媒体查询调整内容内边距 #

如果你的导航栏用了navbar-fixed-top（或sticky-top）类，默认的顶部内边距往往只适配大屏幕，小屏幕下就不够用了。直接给页面主体加针对性的内边距：

/* 仅在768px-991px宽度区间生效 */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    /* 数值根据你导航栏的实际高度调整，比如实际测量是80px就设80px */
    padding-top: 80px;
  }
}

小技巧：用浏览器开发者工具（按F12）选中导航栏元素，查看它的实际高度，再设置对应的padding-top值，这样最精准。

方案2：优化导航栏高度+内容内边距（适配菜单换行场景） #

如果在这个宽度下，导航栏的菜单因为宽度不够自动换行，导致导航栏高度突然变高，那除了调整内容内边距，还可以给导航栏设置最小高度，避免布局混乱：

@media (min-width: 768px) and (max-width: 991px) {
  /* 确保导航栏高度稳定 */
  .navbar {
    min-height: 80px;
  }
  /* 给内容留出足够顶部空间 */
  body {
    padding-top: 80px;
  }
}

方案3：非固定导航栏的调整方式 #

如果你的导航栏没有用固定定位，那遮挡问题大概率是导航栏的底部外边距或内容容器的顶部外边距不足，直接给内容容器加针对性的外边距即可：

@media (min-width: 768px) and (max-width: 991px) {
  /* 替换成你实际的内容容器类，比如.container或.page-content */
  .page-content {
    margin-top: 25px;
  }
}

这些方法都能快速解决遮挡问题，你可以根据自己的导航栏实际情况选一个最适配的。

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