Bootstrap 5导航栏图片与导航项垂直对齐问题求助

问题出在nav-link和btn类的样式冲突上：Bootstrap的btn自带默认上下内边距，和nav-link的内边距叠加后，导致按钮与其他导航元素垂直偏移。以下是几种解决方法：

方法1：用间距类调整按钮内边距 #

通过Bootstrap内置的间距类，让按钮的上下内边距匹配导航链接的样式，可根据实际导航栏高度调整数值，示例用py-1：

<li class="nav-item d-inline-block">
    <a class="nav-link btn btn-danger py-1" href="#" role="button">
        hello
    </a>
</li>

方法2：用flex布局强制垂直居中 #

给包含按钮的nav-item添加d-flex align-items-center类，强制按钮在容器内垂直居中，不受内边距差异影响：

<li class="nav-item d-inline-block d-flex align-items-center">
    <a class="nav-link btn btn-danger" href="#" role="button">
        hello
    </a>
</li>

方法3：简化样式，移除重复的nav-link类 #

不需要同时给按钮添加nav-link和btn类，直接保留btn，并给父元素nav-item添加居中类即可，避免样式冲突：

<li class="nav-item d-flex align-items-center">
    <a class="btn btn-danger" href="#" role="button">
        hello
    </a>
</li>

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