如何移除Navbar上下Padding，实现类似Wix导航栏的效果

要实现类似Wix导航栏的紧凑效果，需要针对性覆盖Bootstrap导航栏及其子元素的默认内边距/外边距，以下是具体解决步骤：

1. 强制清除导航栏本身的内边距 #

Bootstrap的.navbar类默认带有上下内边距，需要直接覆盖这个样式，确保优先级足够：

.navbar-custom {
  height: 60px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

2. 清除子元素的默认上下间距 #

导航栏内的品牌logo、导航链接、右侧操作区都可能带有默认的上下内边距或外边距，需要逐一处理：

处理品牌logo容器 #

.navbar-brand默认有上下padding，直接清零：

.navbar-brand {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

处理导航链接的上下内边距 #

.nav-link默认有上下padding，需要去掉，同时添加行高让文字垂直居中：

.navbar-nav .nav-link {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 60px; /* 匹配导航栏高度，实现垂直居中 */
}

处理右侧操作区的元素对齐 #

右侧的svg、链接和按钮需要垂直居中，避免因元素自身属性撑开导航栏高度：

.navbar-custom .container-fluid > div:last-child {
  display: flex;
  align-items: center;
  height: 100%;
}
/* 调整svg尺寸，避免过高 */
.navbar-custom .divider[xmlns="http://www.w3.org/2000/svg"] {
  height: 20px;
  width: 20px;
}

3. 验证并调整最终样式 #

完成以上修改后，导航栏的上下内边距会被完全清除，元素会垂直居中对齐，接近Wix导航栏的紧凑效果。如果仍有残留间距，可通过浏览器开发者工具（F12）定位具体元素的padding/margin，针对性覆盖即可。

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