Bootstrap navbar-text对齐异常：如何让文本与导航项对齐？

这个问题我之前也碰到过！核心原因是Bootstrap的.nav-link默认带有上下内边距，而.navbar-text的默认样式和它不匹配，导致垂直方向上出现偏移。这里有几个简单好用的解决办法：

方法1：用Flex布局垂直居中 #

给包含navbar-text的nav-item添加d-flex align-items-center类，同时去掉<p>标签默认的底部外边距（加mb-0），就能让文本和旁边的导航链接完美对齐：

<li class="nav-item d-flex align-items-center">
  <p class="navbar-text mb-0">Välkommen {{ user.get_full_name }}</p>
</li>

方法2：匹配导航链接的内边距 #

直接给navbar-text添加和.nav-link一致的上下内边距（Bootstrap默认是py-2），同样去掉底部外边距：

<li class="nav-item">
  <p class="navbar-text py-2 mb-0">Välkommen {{ user.get_full_name }}</p>
</li>

方法3：自定义样式（灵活调整） #

如果内置类满足不了你的需求，也可以写一点自定义CSS来统一样式：

.navbar-text {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0;
}

这样所有的navbar-text都会和nav-link的上下内边距保持一致。

你可以根据自己的场景选其中一种方法，亲测都能解决偏移问题~

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