使用Bootstrap搭建导航栏时如何调整导航文字向下偏移位置

可行解决方法 #

下面是几个可直接落地的调整方案，你可以根据自己的实际代码情况选择：

• 方案1：调整导航链接的上内边距（最常用，不会破坏原有布局逻辑）
  Bootstrap默认导航栏的<a>标签上下内边距是对称的，如果你之前修改过导航栏整体高度，就会出现文字靠上的问题，直接给对应链接调整上内边距即可：

/* 你的ul自带sidebar类，用这个类做选择器优先级更高，不会被Bootstrap默认样式覆盖 */
.sidebar > li > a {
  /* 数值可以根据你要下移的距离自行调整，每加1px文字就下移1px */
  padding-top: 22px;
  /* 如果需要保持导航栏原有高度不变，可以对应减少下内边距的数值 */
  padding-bottom: 18px;
}

• 方案2：用相对定位偏移
  如果不想改动内边距影响导航栏高度，也可以直接给链接加向下偏移：

.sidebar > li > a {
  position: relative;
  top: 5px; /* 数值按需调整即可 */
}

• 方案3：flex垂直居中（适合自定义过导航栏高度的场景）
  如果你手动设置了.navbar的固定高度，直接给导航栏容器开启flex垂直居中更省心：

#bs-example-navbar-collapse-1 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

如果发现加的样式不生效，可以先加!important测试是否是样式优先级的问题，确认效果符合预期后再调整选择器权重即可，不建议线上环境直接保留!important。

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