小屏幕下fixed-top导航栏动态高度时Jumbotron内边距适配方案

这个问题我之前也碰到过——固定在顶部的导航栏因为内容换行变高后，很容易挡住下面的jumbotron内容。给你几个实用的解决方案：

这是我最常用的方案，不管导航栏是因为logo换行、菜单折叠还是其他原因变高，都能自动调整jumbotron的内边距，完美适配。

步骤很简单：

1. 先给你的jumbotron加个ID，比如 <div class="jumbotron" id="main-jumbotron">，方便我们获取元素
2. 写一个函数计算导航栏高度，然后设置jumbotron的padding-top：

// 定义调整函数
function adjustJumbotronPadding() {
  const navbar = document.querySelector('.navbar');
  const jumbotron = document.getElementById('main-jumbotron');
  // 获取导航栏的实际高度，再加一点额外间距（可选，根据你的设计调整）
  const navbarHeight = navbar.offsetHeight;
  jumbotron.style.paddingTop = `${navbarHeight + 20}px`; // 20px是额外留白，可按需修改
}

// 页面加载完成后执行一次
window.addEventListener('DOMContentLoaded', adjustJumbotronPadding);
// 窗口大小变化时重新计算（比如缩小窗口触发logo换行）
window.addEventListener('resize', adjustJumbotronPadding);

这样每次导航栏高度变化，jumbotron的内边距都会跟着更新，再也不会被挡住了。

如果你的logo换行的窗口宽度是固定的（比如小于768px时换行），可以用Bootstrap的内置媒体查询断点来设置不同的内边距：

/* 默认状态下的内边距（对应导航栏正常高度） */
.jumbotron {
  padding-top: 80px;
}

/* 当窗口小于md断点（768px）时，调整内边距适配换行后的导航栏 */
@media (max-width: 767.98px) {
  .jumbotron {
    padding-top: 120px; /* 这个值要根据你导航栏换行后的实际高度调整 */
  }
}

这个方案简单直接，但缺点是如果logo换行的宽度不是标准的Bootstrap断点，或者不同设备上换行时机不一样，适配可能不够精准。

如果你用的是Bootstrap 4及以上版本，可以用CSS变量来根据导航栏的状态动态调整内边距：

/* 定义全局变量，默认导航栏高度 */
:root {
  --navbar-height: 60px;
}

/* 当导航栏内容折叠（或logo换行时，你可以根据实际情况调整选择器），更新变量值 */
.navbar-collapse.show,
.logo-text-wrap { /* 这里的.logo-text-wrap是你可以给换行后的logo加的类，或者用其他状态选择器 */
  --navbar-height: 100px;
}

/* 用calc计算jumbotron的内边距 */
.jumbotron {
  padding-top: calc(var(--navbar-height) + 20px);
}

这个方案纯CSS实现，不需要JS，但需要准确捕捉导航栏高度变化的状态，适合对CSS变量熟悉的场景。

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